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.
WordPress · Jun 22, 2018 · 58c96ee · 58c96ee
1 parent c4b1362
commit 58c96ee
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 7 deletions.
diff --git 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%;
+	}
+}
diff --git 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