Comments (12)
@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?
from scroll-behavior-polyfill.
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).
from scroll-behavior-polyfill.
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.
from scroll-behavior-polyfill.
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?
from scroll-behavior-polyfill.
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)
from scroll-behavior-polyfill.
I dont own a device but maybe my demo might still help
https://codepen.io/FabianK/pen/zJLLrR
from scroll-behavior-polyfill.
@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.
from scroll-behavior-polyfill.
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 π£
from scroll-behavior-polyfill.
@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
from scroll-behavior-polyfill.
Thank you for your time and effort!!
It is working like a charm β€οΈ
from scroll-behavior-polyfill.
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.
from scroll-behavior-polyfill.
@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β¦ π
from scroll-behavior-polyfill.
Related Issues (20)
- scrollIntoView should default to block: "start" HOT 2
- Comparison to iamdustan/smoothscroll HOT 2
- IE 11 HTMLElement.scrollIntoView() doesn't execute HOT 6
- Polyfilled smooth scroll slower than native implementations with long distances HOT 1
- Cannot read property 'set' of undefined HOT 1
- Polyfill is not applied in Edge 87 & Chrome 87 (Windows 10) HOT 4
- TypeError: e is not an Object. (evaluating '"style"in e') HOT 1
- `scroll-padding` is ignored
- Support for non-object syntax. HOT 1
- catchNavigation click causes error when using hash for routing
- Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document': 'xxx' is not a valid selector. HOT 1
- publish minimized version for jsdelivr HOT 2
- Is really needed polyfill in 2k22?
- node >= 9.0.0 HOT 2
- css scroll-snap fights scroll animation HOT 6
- TypeScript 3.5 compatibility issue HOT 1
- not compatible with SSR HOT 11
- Issue with dynamic import: "'index.d.ts' is not a module" HOT 1
- anchor detection if the link also contains a path fails HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from scroll-behavior-polyfill.