Fix issues with gallery in IE11. #7465
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
IE 11 is a horrendous browser, and its support for flexbox is equally horrendous. Galleries, as a result, had crazy stretched images. This PR fixes that.
mtias
approved these changes
Jun 22, 2018
oxyc
added a commit
to generoi/gutenberg
that referenced
this pull request
Jun 26, 2018
* 'master' of https://github.com/WordPress/gutenberg: (69 commits) fix: Show permalink editor in editor (WordPress#7494) Fix text wrapping in Firefox. (WordPress#7472) Try another approach to fixing the sibling inserter in Firefox (WordPress#7530) fix: Improve "add block" text in NUX onboarding (WordPress#7511) Implement core style of including revisions data on Post response (WordPress#7495) Testing: Add e2e test for PluginPostStatusInfo (WordPress#7284) Add end 2 end test for sidebar behaviours on mobile and desktop. (WordPress#6877) Only save metaboxes when it's not an autosave (WordPress#7502) Fix broken links in documentation (WordPress#7532) Remove post type 'viewable' compatibility shim (WordPress#7496) Fix typo. (WordPress#7528) Blocks: Remove wrapping div from paragraph block (WordPress#7477) fix: change import for InnerBlocks (WordPress#7484) Polish library just a teeeeensy bit (WordPress#7522) feat: Add snapshot update script (WordPress#7514) Display server error message when one exists (WordPress#7434) Fix issues with gallery in IE11. (WordPress#7465) Polish region focus style (WordPress#7459) Fix IE11 formatting toolbar visibility (WordPress#7413) Update plugin version to 3.1. (WordPress#7402) ...
|
Is anyone facing this problem after fix? I can still see stretched images, not all of them, just randomly in Internet Explorer 11. In other browsers it looks OK. I use fresh Gutenberg build form official wordpress plugins repo. |
|
Hi @tullsta, I just took galleries for a spin again in IE11. I can't reproduce any issues with image scaling. If you can provide steps to reproduce, perhaps send me the images you added to the gallery to produce the error, then I can take another look. I'm assuming this is an issue in the editor, not the front-end, correct? |
|
Hello @jasmussen thank you for quick reply. It looks the same both in front-end, and in editor. Wordpress v.4.9.8 Things to adjust:
Final result looks like in attached picture. Maybe it's problem in Zerif theme, I asked them, but with no reply so far.
|
|
Thank you for the detailed steps. I will take a look. |
jasmussen
pushed a commit
that referenced
this pull request
Sep 5, 2018
This PR is a followup to feedback in #7465 (comment). Notably there is an issue with image cropping in IE11 galleries. Simply, it doesn't really work because IE11 doesn't support object-fit. This means in some situations — for example a 2 column gallery with landscape, portrait, portrait images — the landscape image is skewed. This PR takes a somewhat radical consequence and simply disables cropping altoghether on IE11. But it works fine in Edge. This PR does a few other improvements too — it changes the IE11 hack to be a more solid one, using @supports(position:sticky) to augment the CSS for capable browsers, rather than relying on a contrast hack that fails if a user actually uses high contrast mode. In addition, it moves this hack from the editor style to the stylesheet file, so benefits affect both editor and theme.
|
Thanks for your steps. I made a PR in #9622. Good news and bad news — it now no longer skews images, but it also means cropping is disabled in IE11. |
jasmussen
added a commit
that referenced
this pull request
Sep 10, 2018
This PR is a followup to feedback in #7465 (comment). Notably there is an issue with image cropping in IE11 galleries. Simply, it doesn't really work because IE11 doesn't support object-fit. This means in some situations — for example a 2 column gallery with landscape, portrait, portrait images — the landscape image is skewed. This PR takes a somewhat radical consequence and simply disables cropping altoghether on IE11. But it works fine in Edge. This PR does a few other improvements too — it changes the IE11 hack to be a more solid one, using @supports(position:sticky) to augment the CSS for capable browsers, rather than relying on a contrast hack that fails if a user actually uses high contrast mode. In addition, it moves this hack from the editor style to the stylesheet file, so benefits affect both editor and theme.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
IE 11 is a horrendous browser, and its support for flexbox is equally horrendous.
Galleries, as a result, had crazy stretched images. This PR fixes that.
Screenshot after this PR is applied: