From bb7829d7bd570f37d9f5e794e9d3eb66793f8532 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Tue, 15 Jan 2019 11:26:26 +0100 Subject: [PATCH] Fix issue with galleries in Microsoft Edge. 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). --- packages/block-library/src/gallery/style.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/block-library/src/gallery/style.scss b/packages/block-library/src/gallery/style.scss index 26053298a3b3b7..a62465bb4f225f 100644 --- a/packages/block-library/src/gallery/style.scss +++ b/packages/block-library/src/gallery/style.scss @@ -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); + } } }