Bug 178973

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:

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	Flags
Safari 11 Grid Bug	none
Safari layout	none
Exepected layout	none
Reduced test case	none
Patch	none
Patch	none
Archive of layout-test-results from ews103 for mac-elcapitan	none
Patch	none

Matt James

Reported 2017-10-27 20:25:04 PDT

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

Attachments
Safari 11 Grid Bug (1.26 MB, video/mp4) 2017-11-01 05:42 PDT, Matt James	no flags	Details
Safari layout (49.55 KB, image/png) 2017-11-01 05:43 PDT, Matt James	no flags	Details
Exepected layout (45.71 KB, image/png) 2017-11-01 05:43 PDT, Matt James	no flags	Details
Reduced test case (784 bytes, text/html) 2017-11-02 05:50 PDT, Manuel Rego Casasnovas	no flags	Details
Patch (7.44 KB, patch) 2017-11-24 17:36 PST, Javier Fernandez	no flags	Details Formatted Diff Diff
Patch (7.44 KB, patch) 2017-11-24 17:54 PST, Javier Fernandez	no flags	Details Formatted Diff Diff
Archive of layout-test-results from ews103 for mac-elcapitan (2.17 MB, application/zip) 2017-11-24 18:34 PST, EWS Watchlist	no flags	Details
Patch (7.48 KB, patch) 2017-11-24 18:34 PST, Javier Fernandez	no flags	Details Formatted Diff Diff
Show Obsolete (2) View All Add attachment proposed patch, testcase, etc.

Manuel Rego Casasnovas

Comment 1 2017-10-31 08:56:37 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?

Matt James

Comment 2 2017-11-01 05:42:13 PDT

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

Comment 3 2017-11-01 05:43:13 PDT

Created attachment 325563 [details] Safari layout

Matt James

Comment 4 2017-11-01 05:43:30 PDT

Created attachment 325564 [details] Exepected layout

Manuel Rego Casasnovas

Comment 5 2017-11-02 05:50:16 PDT

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

Comment 6 2017-11-24 17:36:31 PST

Created attachment 327563 [details] Patch

Javier Fernandez

Comment 7 2017-11-24 17:37:13 PST

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

Javier Fernandez

Comment 8 2017-11-24 17:54:32 PST

Created attachment 327564 [details] Patch

EWS Watchlist

Comment 9 2017-11-24 18:34:27 PST

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

Comment 10 2017-11-24 18:34:28 PST

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

Comment 11 2017-11-24 18:34:55 PST

Created attachment 327567 [details] Patch Fixed tests failures.

WebKit Commit Bot

Comment 12 2017-11-27 01:29:11 PST

Comment on attachment 327567 [details] Patch Clearing flags on attachment: 327567 Committed r225163: <https://trac.webkit.org/changeset/225163>

WebKit Commit Bot

Comment 13 2017-11-27 01:29:13 PST

All reviewed patches have been landed. Closing bug.

Radar WebKit Bug Importer

Comment 14 2017-11-27 01:30:40 PST

<rdar://problem/35694463>

Note You need to log in before you can comment on or make changes to this bug.