Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix issue with galleries in Microsoft Edge. (#13326)
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