Flexbox vertical scrolling issue on macOS in Safari 11


(Markus) #1

Hi friends,

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… :face_with_raised_eyebrow:

Any clue, which code fragment Apple messed up this time? :wink:

Love & Peace
(@OSS117) ;oP


(Joshua Rosenfeld) #2

Ouch! That’s quite painful to look at. I’m not sure who on the team has a Mac to test… @HAWK? @awesomerobot?


#3

Yup, I do. Hang fire.


#4

Yup, I can repro here on Meta. That’s awful. I’m going back to Chrome.


(Markus) #5

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


(Joshua Rosenfeld) #6

There are lots of comparisons - what are you looking to compare? https://caniuse.com/ is great for checking which browsers support which internet standards. Wikipedia has a decent comparison of feature support: Comparison of web browsers - Wikipedia. PCMag and similar sites review different browsers quite frequently - be sure to read a recent-ish review The Best Web Browsers of 2017 | PCMag.com.


(Sam Saffron) #7

This has got to be flexbox related (and super likely an apple bug) , @awesomerobot can you repro this?


(Joffrey Jaffeux) #8

I bet it happens in this codepath:

Some scrolling putting the composer in a state where 1px makes the difference and moves layout a lot in a short amount of time.


(Kris) #9

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…


(Kris) #10

Might be related to the category dropdown? If I add display: none; to .category-input, the flicker stops.


(Joffrey Jaffeux) #11

Oh I know what might be happening, Im out I will fix it later.


(Joffrey Jaffeux) #13

Fixed in master. Thanks.