Flexbox vertical scrolling issue on macOS in Safari 11

AI 生成的摘要

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.

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 个赞

Yup, I do. Hang fire.

2 个赞

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

2 个赞

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 Brave, Chrome, Edge, Firefox, or Safari? We Pick the Best Browser for 2026 | PCMag.

1 个赞

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

2 个赞

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 个赞

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 个赞

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

5 个赞

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

4 个赞

Fixed in master. Thanks.