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
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?
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.
Created attachment 325563 [details] Safari layout
Created attachment 325564 [details] Exepected layout
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.
Created attachment 327563 [details] Patch
*** Bug 179985 has been marked as a duplicate of this bug. ***
Created attachment 327564 [details] Patch
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
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
Created attachment 327567 [details] Patch Fixed tests failures.
Comment on attachment 327567 [details] Patch Clearing flags on attachment: 327567 Committed r225163: <https://trac.webkit.org/changeset/225163>
All reviewed patches have been landed. Closing bug.
<rdar://problem/35694463>