A user, terraboss, encountered a flexbox vertical scrolling issue on Safari 11 in macOS High Sierra, which doesn’t occur on Mobile Safari, Chrome, or Firefox. HAWK was able to reproduce the issue and found it to be “awful.”
After investigation, awesomerobot found that the issue might not be directly flexbox-related and could be another Safari rendering bug. A temporary fix was discovered by adding -webkit-transform: translatez(0); to the CSS of the fixed container, but this could impact performance.
Further investigation revealed that the issue might be related to the category dropdown, as adding display: none; to .category-input stopped the flicker. joffreyjaffeux mentioned that they know what might be happening and will fix it later.
I found a new (?) bug regarding to vertical scrolling on Safari Version 11.0.1 on macOS High Sierra. This issue didn’t occurs on Mobile Safari, Chrome or Firefox. Looks pretty crappy..
Any clue, which code fragment Apple messed up this time?
Off Topic:
Is there any study or overview paper/website which compares all current browsers? I’m thinking about to end the pain with Safari. Which window to the world is the best one? – Best
Wow, yeah this is very bad. As far as I can tell it’s not directly flexbox related, because if I remove flexbox from the container it still happens.
Definitely seems to be yet another Safari rendering bug. There are some similar iOS Safari bugs that can be fixed by adding -webkit-transform: translatez(0); to the CSS of the fixed container… and it looks like that fix works for me here too. Generally not regarded as a great option, as it apparently forces GPU acceleration so it could impact performance.
I can only reproduce it when creating a new topic… so there must be something unique going on there. Investigating a bit more…