Flexbox vertical scrolling issue on macOS in Safari 11

AI-generated summary

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.