From b1aef9c4151ef8d3079a9526a7c87569464606bf Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Wed, 5 Sep 2018 10:25:30 +0200
Subject: [PATCH] Improve galleries for IE11.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This PR is a followup to feedback in https://github.com/WordPress/gutenberg/pull/7465#issuecomment-417065741.

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.
---
 packages/block-library/src/gallery/editor.scss | 13 -------------
 packages/block-library/src/gallery/style.scss  | 16 +++++++++++-----
 2 files changed, 11 insertions(+), 18 deletions(-)

diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss
index 27edd97607cef5..f7a4f9772b61a3 100644
--- a/packages/block-library/src/gallery/editor.scss
+++ b/packages/block-library/src/gallery/editor.scss
@@ -117,16 +117,3 @@
 	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/packages/block-library/src/gallery/style.scss b/packages/block-library/src/gallery/style.scss
index ba6da0fffdf6b3..6ca3d0ad6b6132 100644
--- a/packages/block-library/src/gallery/style.scss
+++ b/packages/block-library/src/gallery/style.scss
@@ -3,7 +3,8 @@
 	flex-wrap: wrap;
 	list-style-type: none;
 	padding: 0;
-	// allow gallery items to go edge to edge
+
+	// Allow gallery items to go edge to edge.
 	margin: 0 -8px 0 -8px;
 
 	.blocks-gallery-image,
@@ -19,7 +20,7 @@
 			margin: 0;
 			height: 100%;
 			display: flex;
-			align-items: flex-end;
+			align-items: center;
 		}
 
 		img {
@@ -50,11 +51,16 @@
 	&.is-cropped .blocks-gallery-item {
 		a,
 		img {
-			flex: 1;
+			// IE11 doesn't support object-fit, so just make sure images aren't skewed.
+			// The following rules are for all browsers.
 			width: 100%;
-			height: 100%;
-			object-fit: cover;
 
+			// IE11 doesn't read rules inside this query. They are applied only to modern browsers.
+			@supports (position: sticky) {
+				height: 100%;
+				flex: 1;
+				object-fit: cover;
+			}
 		}
 	}