Skip to content

Commit

Permalink
Fix issue with galleries in Microsoft Edge. (#13326)
Browse files Browse the repository at this point in the history
Fixes #13270. Props @designsimply for proposed fix, extensive debugging, and finding the right solution.

Turns out, as Sheri correctly identified, there is a bug with Microsoft Edge where the browser is basically rewriting whatever is inside the `calc` rule. As she noted:

> Edge calculates an ever-so-slightly different width as calc(-10.6667px + 33.3333%) served via style.min.css and when Gutenberg is deactivated then Edge calculates the width as calc(-10.66px + 33.33%) served via style.css. I noticed that changing margin-right to be even one pixel smaller, from 16px to 15px

The difference between `-10.6667px + 33.3333%` and `-10.66px + 33.33%` is enough to cause three columns to become two.

This PR adopts Sheri's proposed fix, and wraps it in an Edge-Only rule.

Don't worry, normal browsers ignore that rule, and also do not rewrite `calc` rules. Here's what Chrome shows in the inspector: `width: calc((100% - 16px * 2) / 3);` (as it should).

Before:

<img width="765" alt="before" src="https://user-images.githubusercontent.com/1204802/51174867-20cf8c80-18b9-11e9-9fd9-537c78809c5d.png">

After:

<img width="809" alt="after" src="https://user-images.githubusercontent.com/1204802/51174833-0b5a6280-18b9-11e9-8b3d-3a8a766db713.png">
  • Loading branch information
jasmussen authored and jorgefilipecosta committed Jan 25, 2019
1 parent be9870d commit 235a1a4
Showing 1 changed file with 7 additions and 0 deletions.
7 changes: 7 additions & 0 deletions packages/block-library/src/gallery/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,13 @@
&.columns-#{ $i } .blocks-gallery-item {
width: calc((100% - #{ $grid-size-large } * #{ $i - 1 }) / #{ $i });
margin-right: 16px;

// Rules inside this query are only run by Microsoft Edge.
// Edge miscalculates `calc`, so we have to add some buffer.
// See also https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/15637241/
@supports (-ms-ime-align:auto) {
width: calc((100% - #{ $grid-size-large } * #{ $i - 1 }) / #{ $i } - 1px);
}
}
}

Expand Down

0 comments on commit 235a1a4

Please sign in to comment.