Flexbox vertical scrolling issue on macOS in Safari 11

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

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

1 Like

Yup, I do. Hang fire.

2 Likes

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

2 Likes

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

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 https://www.pcmag.com/article2/0,2817,1815833,00.asp.

1 Like

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

2 Likes

I bet it happens in this codepath:

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/components/discourse-topic.js.es6#L120

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

3 Likes

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…

3 Likes

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

5 Likes

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

4 Likes

Fixed in master. Thanks.