Safari Issue When Updating HTML & Sticky Status at the Same Time

Published on: Monday, 16 March 2020

When updating HTML content and sticky status at the same time in a macrotask/microtask (e.g. setTimeout or Promise.then), the value shown on the screen seems to be stale value. (still 0)

Code sandbox: https://codesandbox.io/s/adoring-bose-z9uep To replicate the issue, open this link in Safari: https://z9uep.csb.app/ (a popped out version of the sandbox above)

What I learned about this issue so far:

- moving setState into main thread would solve the issue
- changing position: sticky; to position: fixed; will solve the issue
- not using the condition operator ? : will solve the issue