From 58c96eefe7df22b27584a512cb914f18070d01d1 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Fri, 22 Jun 2018 12:32:46 +0200 Subject: [PATCH] Fix issues with gallery in IE11. (#7465) 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. --- core-blocks/gallery/editor.scss | 11 +++++++++++ core-blocks/gallery/style.scss | 7 ------- 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/core-blocks/gallery/editor.scss b/core-blocks/gallery/editor.scss index 81304ff77a3a6e..cbe95fcb308614 100644 --- a/core-blocks/gallery/editor.scss +++ b/core-blocks/gallery/editor.scss @@ -100,3 +100,14 @@ left: 50%; transform: translate( -50%, -50% ); } + +// IE11 doesn't support object-fit or flex very well, so we inline-block. +@media all and ( -ms-high-contrast: none ) { + *::-ms-backdrop, .blocks-gallery-item { + display: inline-block; + } + + *::-ms-backdrop, .blocks-gallery-item img { + width: 100%; + } +} \ No newline at end of file diff --git a/core-blocks/gallery/style.scss b/core-blocks/gallery/style.scss index 9bdaaafc9105b0..6d51a93880593f 100644 --- a/core-blocks/gallery/style.scss +++ b/core-blocks/gallery/style.scss @@ -15,7 +15,6 @@ justify-content: center; position: relative; - figure { margin: 0; height: 100%; @@ -53,12 +52,6 @@ object-fit: cover; } - - // Alas, IE11+ doesn't support object-fit - _:-ms-lang(x), figure { - height: auto; - width: auto; - } } // Responsive fallback value, 2 columns