Bug 236634 – [css-flexbox] Safari does not add padding-end on overflow for flexbox (but now does for grid)

• Status: RESOLVED
• Resolution: CONFIGURATION CHANGED
• Component: Layout and Rendering

Hi,

It seems that Safari TP properly aligned on this proposal (https://github.com/w3c/csswg-drafts/issues/129) to align with what other browsers are doing. However, while Safari is doing it correctly for grid,  it still does not work for Flexbox.

It would be nice if this issue could be fixed before iOS 15.4, as this makes now the experience completely inconsistent, with grid following specs but flexbox not.

The issue can be reproduced here: https://codepen.io/bakura10/pen/JjOrMEr

Both Firefox and Chrome behaves as the spec.

[Radar WebKit Bug Importer]

<rdar://problem/89278970>

[Ludo]

Running into this issue myself with my team. We are using CSS sliders on our theme (Shopify website) done with flexbox and scroll snap properties but we have issues too with the last slide sitting on the edge of the viewport instead of having the margin applied (which works in Chrome and Firefox).

So we're using a workaround where we use a pseudo element :after on the <ul> element and applying some margin to that and it seem to work.

Any way to prioritize this? Safari still behaves different from other browsers in  regards of flexbox within overflow containers. Safari is still inconsistent in its inconstencies, and makes applying hack very complicated.

Sorry about this, just tried on Safari 16 and actually it seems to have been fixed. Can someone at Apple confirms and eventually close this ticket?

[Ahmad Saleem]

All browsers (Safari 16.3, STP162, WebKit ToT, Chrome Canary 112 and Firefox Nightly 111) are rendering fine.

Marking this as "RESOLVED CONFIGURATION CHANGED". Thanks!