When updating the grid-gap (or gap, column-gap, row-gap, etc.) by editing the style attribute of the element, the styles are not recalculated and element does not change. This also happens when editing the grid-gap value in Safari Inspector. In other browsers, the styles are recalculated and the layout is updated. Here is an example showing the behavior: https://jsbin.com/guhufuk/1/edit?css,js,output
<rdar://problem/85727334>
In case the example above doesn't load, this is another repro: https://codesandbox.io/s/eager-lederberg-vx8pg?file=/src/App.js
cc'd the Igalia grid layout experts.
Created attachment 451120 [details] Test reduction
This looks like a styleAdjuster bug. We get the setStyle call right after the gap value change but we compute the diff to be Equal -> no layout. If I force the diff to Layout, the jsbin example starts working.
This affects flex gaps too.
@@ -664,6 +664,9 @@ static bool rareNonInheritedDataChangeRequiresLayout(const StyleRareNonInherited if (first.flexibleBox != second.flexibleBox) return true; + if (first.columnGap != second.columnGap || first.rowGap != second.rowGap) + return true; + if (first.order != second.order || first.alignContent != second.alignContent || first.alignItems != second.alignItems fixes both grid and flex. patch is coming up.
Created attachment 451126 [details] Patch
will fix the "!=" older compiler vs. auto generating now issue
Created attachment 451129 [details] [fast-cq]Patch
Committed r289241 (246925@main): <https://commits.webkit.org/246925@main> All reviewed patches have been landed. Closing bug and clearing flags on attachment 451129 [details].
Thank you all for addressing this! Looking forward to the release.
(In reply to Brad Frost from comment #12) > Thank you all for addressing this! Looking forward to the release. Thank you for filing it!