Foundation-sites: Foundation 6.2.1 Reveal scrolls to top.

[muhammetm]

How can we reproduce this bug?

1. Click on the delete link in edit button dropdown, reveal modal doesn't stay in same vertical offset as the element clicked. This issue only appears when reveal modal is linked to a dropdown link.

What did you expect to happen?
Reveal modal should stay near the clicked element.

What happened instead?
Scrolls to the top.

Test case:

• JSFiddle link

[josh-h]

I am experiencing a similar issue, so I simplified your test case as it is not dependent on the dropdown (at least not for me). https://jsfiddle.net/w79y5dy2/2/

Previously I commented on #8914 believing it was an iOS issue. But, your test case is reproducible on my desktop.

Interestingly the docs running 6.2.3 do not exhibit this problem. So, I updated the fiddle to use 6.2.3 and see the same page position getting reset when the reveal opens.

This occurs for me when the page width forces the 'small' layout. Looking at the DOM it looks like some style is getting set in the reveal to position it to the top of the page. So, when the reveal is opened the page scrolls to the reveal which is at the top.

[josh-h]

Sigh, found the problem. The link:

<a href="#" data-open="exampleModal">Open Reveal</a>

Note the href="#", the browser is navigating the link and therefore scrolling to the top of the page. Remove the href and things are fine.

[muhammetm]

@josh-h Thank you very much, it's resolved. Something so simple, didn't see it.

[CarlosSouza]

I'm having this exact same problem.

I've been using link without href but it keeps moving screen to the top. I also tried using button (as the official documentation examples), with no success.
It's happening on small and medium breakpoints, while on large it works as intended.

It might be happening because of the position: fixed and overflow: hidden properties inside this rule:

  html.is-reveal-open,
  html.is-reveal-open body {
    min-height: 100%;
    overflow: hidden;
    position: fixed;
    user-select: none;
  }

[ncoden]

@CarlosSouza This is not the same issue. Please open a new one with more details about the version you're using, your browser, etc...