2.5.13
Reproduction linkhttps://github.com/Axure/sticky-scroll-demo
Steps to reproduceand open http://localhost:8080. Scroll inside the region with black border from top to bottom. You will see another div with black border with "text" inside it.
The text should always be right on the midline of the visible area of the smaller bordered div.
What is actually happening?The text is sometimes not on the midline, which produces visible "lags".
You can see wrongly rendered frames in the developer tools, e.g.:
(Note that for clarity I temporarily set a red border for the div of the text.)
An online demo is available at https://axure.github.io/sticky-scroll-demo/.
The effect is achieved by modifying the translateY of the text inside the smaller div on every scroll. It seems that the modified styled is not applied in time, so the a newly scrolled frame is rendered using the old style.
I highly suspect that not only styles, but also other data are not applied in time in possible scenarios.
It is not a problem of the browser, since the raw DOM solution works well:
Angular and React do not suffer from this problem:
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4
