New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix issue with galleries in Microsoft Edge. #13326

Merged
merged 1 commit into from Jan 25, 2019

Conversation

@jasmussen
Copy link
Contributor

jasmussen commented Jan 15, 2019

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:

before

After:

after

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).

@jasmussen jasmussen added this to the 4.9 (Gutenberg) milestone Jan 15, 2019

@jasmussen jasmussen self-assigned this Jan 15, 2019

@jasmussen jasmussen requested a review from WordPress/gutenberg-core Jan 15, 2019

@jasmussen

This comment has been minimized.

Copy link
Contributor Author

jasmussen commented Jan 15, 2019

Thank you @designsimply for your thorough testing and debugging. It was instrumental in fixing this, and ultimately this is your pull request.

@jorgefilipecosta
Copy link
Member

jorgefilipecosta left a comment

Fixes the problem in my tests 👍

@jorgefilipecosta jorgefilipecosta merged commit 235a1a4 into master Jan 25, 2019

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details

@jorgefilipecosta jorgefilipecosta deleted the try/fix-edge-galleries branch Jan 25, 2019

@karmatosed karmatosed added this to Tighten Up in Phase 2 Jan 31, 2019

@kjellr kjellr moved this from Tighten Up to Done in Phase 2 Feb 4, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment