Problem/Motivation
Discovered in #2938182: Design intuitive affordances for Layout Builder (for illustrating which parts of the page are editable in a given context)
The editible-area outline in Layout Builder uses a negative offset. This means that if the editable area does not have left or right margins, the left and right outlines are still visible at narrower widths. IE11, however, does not support negative widths, so the right and left outlines are not visible in IE11 on some themes.
Proposed resolution
Use a different CSS approach that works in all browsers + Windows high-contrast mode.
Remaining tasks
Patch, review.
User interface changes
Left and right outlines visible in IE at narrower widths, when using themes where the editable area doesn't have Left/Right margins
API changes
NA
Data model changes
NA
Release notes snippet
NA
Comment | File | Size | Author |
---|---|---|---|
#8 | 3038413-8.patch | 483 bytes | lauriii |
#4 | ie-border-umami.png | 238.06 KB | bnjmnm |
#4 | ie-border-bartik.png | 106.29 KB | bnjmnm |
#4 | safari-border.png | 125.16 KB | bnjmnm |
#4 | chrome-border.png | 129.4 KB | bnjmnm |
Comments
Comment #2
bnjmnmHere is:
Comment #3
lauriiiWe cannot use box-shadow for this because it is not visible in the Windows high contrast mode.
Comment #4
bnjmnmTook another look at how the
.layout-builder
element is incorporated on the page, and the sizing concerns that had me avoiding borders do not seem to an issue in this case, particularly since the element is already using padding. This patch just uses border and I've also provided screenshots for various browsers/settings.Comment #6
tim.plunkettTagging
Comment #7
DyanneNovaThis looks good to me! I think the simpler border approach will also be easier to understand for themers who want to adjust the styling.
Comment #8
lauriiiMinor reroll after #3038562: Update stylelint to 9.10.1.
Comment #9
tim.plunkettThanks for the reroll! +1 for RTBC
Comment #11
lauriiiCommitted d4ddfe0 and pushed to 8.8.x. Thanks!
Leaving open for backport to 8.7.x.
Comment #13
lauriiiCherry-picked to 8.7.x now that the commit freeze is over. Thank you everyone again!