| Summary: | [css-grid] Display issues with grid item using 'auto' margins | ||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Matt James <mattjamesmedia> | ||||||||||||||||||
| Component: | CSS | Assignee: | Javier Fernandez <jfernandez> | ||||||||||||||||||
| Status: | RESOLVED FIXED | ||||||||||||||||||||
| Severity: | Normal | CC: | commit-queue, darin, ews-watchlist, jfernandez, rego, rniwa, simon.fraser, svillar, webkit-bug-importer | ||||||||||||||||||
| Priority: | P2 | Keywords: | InRadar | ||||||||||||||||||
| Version: | Safari 11 | ||||||||||||||||||||
| Hardware: | Unspecified | ||||||||||||||||||||
| OS: | Unspecified | ||||||||||||||||||||
| See Also: |
https://bugs.chromium.org/p/chromium/issues/detail?id=776581 https://bugs.webkit.org/show_bug.cgi?id=179959 |
||||||||||||||||||||
| Attachments: |
|
||||||||||||||||||||
|
Description
Matt James
2017-10-27 20:25:04 PDT
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. |