Bug 178973 – [css-grid] Display issues with grid item using 'auto' margins

• Status: RESOLVED
• Resolution: FIXED
• Component: CSS

[Matt James]

Child element in Grid container has 'max-width' property set in an min-width media query. Once Safari 11 update was implemented, the overall grid layout for the container broke upon initital view. Toggling 'max-width' off and back on in developer tools fixes the issue, but is unrealistic for the majority of users.  Toggle 'max-width' off and on on the link in the attached pen: https://codepen.io/mattfrankjames/pen/e85f82981725d1f65604b0fb23069479

[Manuel Rego Casasnovas]

Hi Matt, thanks for reporting the issue.

Could yo provide a reduced test case?
Or send us screenshots/screencast of the expected behavior in your example?

Also does it work fine in other browsers like Chrome or Firefox?

[Matt James]

Created attachment 325562 [details]
Safari 11 Grid Bug

Demonstrates layout bug that resolves when toggling max-width property off and back on in developer tools.

[Matt James]

Created attachment 325563 [details]
Safari layout

[Matt James]

Created attachment 325564 [details]
Exepected layout

[Manuel Rego Casasnovas]

Created attachment 325713 [details]
Reduced test case

Thanks for the information, now I've managed to understand the problem and reproduce it.
As a workaround you can center the element with "justify-self: center;" instead of the auto margins.

The issue is reproducible without max-width, I'm attaching a reduced test case.
If you remove the "margin-top" in my example it works as expected (also if you don't center the item with "auto" margins).
We need to investigate what's going on to get such a weird results.

[Javier Fernandez]

Created attachment 327563 [details]
Patch

[Javier Fernandez]

*** Bug 179985 has been marked as a duplicate of this bug. ***

[Javier Fernandez]

Created attachment 327564 [details]
Patch

[EWS Watchlist]

Comment on attachment 327564 [details]
Patch

Attachment 327564 [details] did not pass mac-ews (mac):
Output: http://webkit-queues.webkit.org/results/5353561

New failing tests:
imported/w3c/web-platform-tests/css/css-grid-1/alignment/grid-self-alignment-stretch-vertical-rl-006.html
imported/w3c/web-platform-tests/css/css-grid-1/alignment/grid-self-alignment-stretch-006.html
imported/w3c/web-platform-tests/css/css-grid-1/alignment/grid-self-alignment-stretch-vertical-rl-014.html
imported/w3c/web-platform-tests/css/css-grid-1/alignment/grid-self-alignment-stretch-vertical-lr-014.html
imported/w3c/web-platform-tests/css/css-grid-1/alignment/grid-self-alignment-stretch-014.html
imported/w3c/web-platform-tests/css/css-grid-1/alignment/grid-self-alignment-stretch-vertical-lr-006.html

[EWS Watchlist]

Created attachment 327566 [details]
Archive of layout-test-results from ews103 for mac-elcapitan

The attached test failures were seen while running run-webkit-tests on the mac-ews.
Bot: ews103  Port: mac-elcapitan  Platform: Mac OS X 10.11.6

[Javier Fernandez]

Created attachment 327567 [details]
Patch

Fixed tests failures.

[WebKit Commit Bot]

Comment on attachment 327567 [details]
Patch

Clearing flags on attachment: 327567

Committed r225163: <https://trac.webkit.org/changeset/225163>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.

[Radar WebKit Bug Importer]

<rdar://problem/35694463>