foundation-sites

foundation-sites copied to clipboard

What should happen?

I do have soft scrolling enabled for my whole website so that links to anchors always lead to a soft scrolling:

html {
    scroll-behavior: smooth;
}

When I open and close a reveal, the scroll position should stay as it is.

What happens instead?

When I open a reveal with the click of a button and then close it again, this leads to unwanted behaviour, different for different browsers:

Chrome 95 / Edge 95 / Opera 81 / Safari on iOS 15

The website jumps to the top, then scrolls down to the clicked button

On Safari iOS this only happens when the smooth scrolling behavior is manually enabled in Safari options.

Firefox 94

The website jumps up so that the clicked button is at the bottom of the viewport.

Test Case and/or Steps to Reproduce (for bugs)

Test Case: https://codepen.io/discostu36/full/oNeyXMy

How to reproduce:

1. Click on "Soft scroll to button" to make sure that your browser supports scroll-behavior
2. Click on the "Click me for a modal" button
3. Click on the button that closes the modal

Checklist

• [x] I have read and follow the CONTRIBUTING.md document.
• [x] There are no other issues similar to this one.
• [x] The issue title and template are correctly filled.

I am not sure what I can do. I have zero control over the browser's scroll behavior. Do you have any ideas on how to address this?

I don't know what Foundation does exactly when I close the reveal that leads to this behavior (changing focus?). Therefore I also don't know what could be done to fix this.

@Discostu36 Hello! Has there been any update on this since? I've encountered the same problem and cannot find a good solution/alternative.

Sorry, no, I don’t have a fix for this.

@acrusella I have now written this fix for my project. But I still think that Foundation code should be fixed to be compatible with smooth scrolling.

CSS:

html, body {
    scroll-behavior: smooth;
}

JavaScript:

function smoothScrollingOff() {
  document.querySelector("html").style.scrollBehavior = "auto";
  document.querySelector("body").style.scrollBehavior = "auto";
}

function smoothScrollingOn() {
  document.querySelector("body").style.removeProperty("scroll-behavior")
  document.querySelector("html").style.removeProperty("scroll-behavior")
}

$(document).on('open.zf.reveal', '[data-reveal]', function() {
  smoothScrollingOff();
});

$(document).on('closed.zf.reveal', '[data-reveal]', function() {
  setTimeout(smoothScrollingOn, 3000);
});

👋 Hello there! I have found the same bug and it is worse if you have a fixed header aswell with a scroll-padding-top. It's bouncing top & back in place after you close the reveal. I have found a workaround though, instead of having the scroll-behavior on the body & the html as you did, you just set it on the html and then you can add this bit of css (it's written in Scss (Sass), adjust it if you need) :

html {
  &.is-reveal-open {
    overflow-y: unset;
    -webkit-overflow-scrolling: unset;

    &.zf-has-scroll {
      position: unset;
      overflow-y: unset;
    }
  }
}

You don't need this on the html but you actually need what is-reveal-open & zf-has-scroll add to the body with these classes active. Also when overriding these properties, I've found that many functions in the foundation.reveal.js are about moving the scroll position, but if you don't fix the html (position: fixed) you don't need these functions anymore.

And lastly, still linked to that scroll-behavior: smooth, if you have multiple buttons opening the same Reveal, the $anchor (L53) is wrong on Safari as it targets the last element with the same id, and with these lines (L238 & L484):

this.$activeAnchor = $(document.activeElement).is(this.$anchor) ? $(document.activeElement) : this.$anchor;

this.$activeAnchor.focus();

it sets on focus the last button with this id, making the page smoothscroll to that element. You can check it here: https://codepen.io/heyflo/pen/eYQBZOy

If you click the first button, it opens the modal. Then close it. And it sets the second button on focus (I added the border in red so you can notice).