Bug 268953 – Content not aligned as expected to subgrid

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

I have built a carousel to test a particular use case for subgrid I've been sitting on for years.

See it here: http://chrome-subgrid-issue.surge.sh/

It has the expected behaviour in Firefox and in recent Chrome (not in less-recent Chrome; see this ticket I raised and which they fixed: https://issues.chromium.org/issues/40067588 -- it's the same test case hence the "chrome subgrid issue" title on the test page -- though Webkit does not have the same exact issue Chrome did)

In Safari 16.5 and 17 (and possibly earlier) there are a number of issues.

The most important is the alignment: the .content elements and the .nav-buttons element (currently obscured due to another issue; see below) are not rendering where they should. There should be spacer cells of 1fr each at the top and bottom of the light grey content area. .content and .nav-buttons together should take up the remaining light-grey space together, vertically centred between those spacer cells, with the height of the row .content takes up defined by the tallest .content out of the slides. .nav-buttons should be directly below that row.

To see the expected layout, view the test page in Firefox or recent Chrome.

There are other issues too:

- I can't see the scrollbar until I click and drag to the right beyond the edge, as if I was trying to select all the text.
- The .nav-buttons element should be rendering above (in z) the elements earlier in DOM order. To work around it, give it position: relative.

[Radar WebKit Bug Importer]

<rdar://problem/122983614>

[Karl Dubost]

Hi bart,
Thanks for the detailed report. 

Other issues.
The scrollbar in the bottom is not apparent on any browsers, it's part of macOS settings, which auto-hides the scrollbar. Or maybe you are alluding to something else.

About .nav-buttons, could you open a separate issue, that would be appreciated!
Thanks.

[Karl Dubost]

Created attachment 469882 [details]
rendering in safari, firefox, chrome

So about the issue itself. 
I do not see the differences that you are pointing at. 
Or maybe I do not understand what I should be looking at. 
Could you take a screenshot pointing at the difference?

Tested in 
Safari Technology Preview  188           19619.1.2.1.1
Firefox Nightly            124.0a1       12424.2.11
Google Chrome Canary       123.0.6299.0  6299.0

Created attachment 469896 [details]
screenshot safari 17.3 browserstack

> The scrollbar in the bottom is not apparent on any browsers, it's part of macOS settings, which auto-hides the scrollbar. Or maybe you are alluding to something else.

I expected to see it fade in at least on hover. But as you said, it seems it's the same on other browsers on MacOS.

> About .nav-buttons, could you open a separate issue, that would be appreciated!

OK, I will.

> So about the issue itself. I do not see the differences that you are pointing at. Or maybe I do not understand what I should be looking at. Could you take a screenshot pointing at the difference?

Other than the .nav-buttons thing your screenshot does indeed look fine.

Attached is what I see in Safari 17.3. This is in Browserstack, which at least claims to use real browsers on real Macs. (It looks the same if I pick 16.5 or 15.6.)

.nav-buttons issue reported separately at https://bugs.webkit.org/show_bug.cgi?id=269498

[Karl Dubost]

Created attachment 470190 [details]
rendering in safari, firefox, chrome

So I guess we can close this bug, as it seems it has been resolved.
This is with STP 189 on the left side. 

The other part .nav-buttons is is a separate bug. 
Thanks for opening!