Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Gallery Block: Gallery not being properly displayed/rendered in Edge #13270

Closed
AtrumGeost opened this issue Jan 9, 2019 · 2 comments · Fixed by #13326
Closed

Gallery Block: Gallery not being properly displayed/rendered in Edge #13270

AtrumGeost opened this issue Jan 9, 2019 · 2 comments · Fixed by #13326
Assignees
@jasmussen
Labels
[Block] Gallery Affects the Gallery Block - used to display groups of images [Type] Bug An existing feature does not function as intended

Comments

@AtrumGeost
Copy link

Bug Description
When opening a page with a galler of three columns in Edge it won't be properly displayed as in other browsers.

To Reproduce
Steps to reproduce the behavior:

  1. Create a new page or post with a 3-column gallery
  2. Open the published page or post in Edge

Expected behavior
To get the gallery displayed as in other browsers

Screenshots

https://bright-natterjack.jurassic.ninja/gallery-test/

Gallery in Edge:

screen shot on 2019-01-09 at 15-03-20

Gallery in Chrome:

screen shot on 2019-01-09 at 15-06-18

Desktop:

  • OS: Windows 10 for Edge and macOS for Chrome
  • Browser: Edge 18 Latest Version (using Browserstack) and Chrome Version 71.0.3578.98 (Official Build) (64-bit)

Additional context

  • Tried with Jurassic Ninja running WordPress 5.0.3 and Twenty Nineteen theme
  • Tried with WordPress.com and the Affinity theme
@Soean Soean added Needs Testing Needs further testing to be confirmed. [Block] Gallery Affects the Gallery Block - used to display groups of images labels Jan 9, 2019
@designsimply
Copy link
Member

Nice find! I tested and confirmed with WordPress 5.0.3 and no active plugins using Twenty Nineteen 1.2 that a 3 column gallery doesn't line up correctly in Edge 18 on Windows 10.

bs_win10_edge_18 0 6

Interestingly, I found that it works properly if the Gutenberg 4.8.0 plugin is activated:

bs_win10_edge_18 0 7

@jasmussen the main difference I spotted between the two screenshots above is that when the plugin is NOT installed 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, solves the problem but I am not sure if that's too much of a bandaid kind of a fix. Ooo, I can PR it if that looks like a viable solution to you though!

Related PR: #10027

Code ref: https://github.com/WordPress/gutenberg/blame/88a69507e0bba453fd0f239b4be1567c94953396/packages/block-library/src/gallery/style.scss#L102

btw, this all seems incredibly sub-pixel rendering edge-case-y to me! I did find that different browsers round fractional pixels differently (https://cruft.io/posts/percentage-calculations-in-ie/) but the part about Edge rounding differently for minified CSS (more decimal places) vs unminified CSS is interesting and I am curious whether the difference in rounding happens because of the minification or if it's something coming from the plugin vs core. It's got to be because of the minifcation, right?

@designsimply designsimply added [Type] Bug An existing feature does not function as intended and removed Needs Testing Needs further testing to be confirmed. labels Jan 10, 2019
jasmussen pushed a commit that referenced this issue Jan 15, 2019
Fix issue with galleries in Microsoft Edge.
bb7829d 
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 mentioned this issue Jan 15, 2019
Merged
jorgefilipecosta pushed a commit that referenced this issue Jan 25, 2019
@jasmussen @jorgefilipecosta
Fix issue with galleries in Microsoft Edge. (#13326)
235a1a4 
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">
youknowriad pushed a commit that referenced this issue Mar 6, 2019
@jasmussen @youknowriad
Fix issue with galleries in Microsoft Edge. (#13326)
9d32838 
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">
youknowriad pushed a commit that referenced this issue Mar 6, 2019
@jasmussen @youknowriad
Fix issue with galleries in Microsoft Edge. (#13326)
7a9010c 
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">
@aduth aduth mentioned this issue Mar 6, 2020
Merged
This was referenced Sep 16, 2021
Open
Open
@coreyworrell
Copy link
Contributor

coreyworrell commented Sep 30, 2021 •
edited
Loading

This also happens in Firefox when fractional scaling is used (layout.css.devPixelsPerPx equals 1.25 for example).

@monzerfoda monzerfoda mentioned this issue Jun 21, 2023
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jasmussen jasmussen

Labels
[Block] Gallery Affects the Gallery Block - used to display groups of images [Type] Bug An existing feature does not function as intended
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix issue with galleries in Microsoft Edge. WordPress/gutenberg
5 participants
@coreyworrell @Soean @designsimply @jasmussen @AtrumGeost