Anchor Bug in Edge and Safari

[Krutsch]

Hi I found a bug here:
https://codepen.io/FabianK/pen/zJLLrR

As you can see clicking on the buttons will move you somewhere but not to the image.
If you remove scroll-behavior="smooth" on <ul class="scroll" ... it will work again but without "smooth"

[wessberg]

Hi there. Thanks for submitting this issue. I've confirmed this issue thanks to your repro.
I've fixed it in the latest release (v2.0.7).

[kdubb]

Version 2.0.6 works in Safari (scrolls to correct location via anchor update), 2.0.7 causes the same/similar bug as was reported in Edge under 2.0.6.

[wessberg]

Hi there. I'm reopening the issue. Do you a simple reproducible demo I can take a look and investigate? Also, which Safari version are you seeing this behavior in?

[olets]

Seeing a similar thing in Safari 12.1.2. Seems to happen in two stages — scrolls first to what might be the correct location (it's too quick for me to be sure. it's close anyway) and then to somewhere else (close the starting point, possibly back at the starting point)

[Krutsch]

I dont own a device but maybe my demo might still help
https://codepen.io/FabianK/pen/zJLLrR

[wessberg]

@Krutsch, Safari v12.1, v13, and v13.1, works great with your codepen demo.

@olets, it would be great if you could provide a repo that I can take a look at since I can't reproduce this behavior easily. I can test in Safari 12.1.

[Krutsch]

By the way, do you support IE11 too? 🙈 (https://zealous-tereshkova-e96a40.netlify.com)
I think it was working once - maybe I broke it with changes 💣

[wessberg]

@Krutsch, there was a few IE-related issues with Element.prototype.scrollIntoView as well as anchor navigation. I've fixed these and published a new version: v2.0.13

[Krutsch]

Thank you for your time and effort!!
It is working like a charm ❤️

[wessberg]

Closing this issue since the original issue may have been fixed in v2.0.13. If that is not the case, feel free to comment again, and I'll reopen this issue.

[gpbl]

@wessberg thanks for your work on this polyfill! It seems that .13 breaks Safari making it to scroll back to the first element:

https://codepen.io/FabianK/pen/zJLLrR

I can't see from the diff however how it would:
v2.0.12...v2.0.13

maybe the dependencies updates?

[martinschilliger]

@gpbl I believe I've found the solution: The polyfill sets the property scroll-snap-type: none in the element's style attribute to prevent troubles with snapping. But setting scroll-snap-type in safari causes a scrolling to 0. 🤯

The workaround was for me to set scroll-snap-type: y mandatory !important in the stylesheet (where the polyfill cannot detect it according to https://github.com/wessberg/scroll-behavior-polyfill#are-there-any-known-quirks).

It's ugly, but it works. But could cause troubles in the future… 🙄