Remove IE specific CSS hacks from the gallery block css (#34372)

Co-authored-by: Glen Davies <[email protected]>
WordPress · Aug 31, 2021 · 9506b08 · 9506b08
1 parent 7a6c1f2
commit 9506b08
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 68 deletions.
diff --git a/packages/block-library/src/gallery/deprecated.scss b/packages/block-library/src/gallery/deprecated.scss
@@ -29,27 +29,16 @@
 		figure {
 			margin: 0;
 			height: 100%;
-
-			// IE doesn't support flex so omit that.
-			@supports (position: sticky) {
-				display: flex;
-				align-items: flex-end;
-				justify-content: flex-start;
-			}
+			display: flex;
+			align-items: flex-end;
+			justify-content: flex-start;
 		}
 
 		img {
 			display: block;
 			max-width: 100%;
 			height: auto;
-
-			// IE doesn't handle cropping, so we need an explicit width here.
-			width: 100%;
-
-			// IE11 doesn't read rules inside this query. They are applied only to modern browsers.
-			@supports (position: sticky) {
-				width: auto;
-			}
+			width: auto;
 		}
 
 		figcaption {
@@ -81,16 +70,9 @@
 	&.is-cropped .blocks-gallery-item {
 		a,
 		img {
-			// IE11 doesn't support object-fit, so just make sure images aren't skewed.
-			// The following rules are for all browsers.
-			width: 100%;
-
-			// 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;
-			}
+			height: 100%;
+			flex: 1;
+			object-fit: cover;
 		}
 	}
 

diff --git a/packages/block-library/src/gallery/style.scss b/packages/block-library/src/gallery/style.scss
@@ -29,33 +29,20 @@
 		position: relative;
 		margin-top: auto;
 		margin-bottom: auto;
-		// IE11 doesn't like the "flex-direction: column;" here.
-		@supports ( position: sticky ) {
-			flex-direction: column;
-		}
+		flex-direction: column;
 
 		> div,
 		> a {
 			margin: 0;
-
-			// Avoid applying flex styles to IE11.
-			@supports ( position: sticky ) {
-				flex-direction: column;
-				flex-grow: 1;
-			}
+			flex-direction: column;
+			flex-grow: 1;
 		}
 
 		img {
 			display: block;
 			height: auto;
 			max-width: 100%;
-			width: 100%;
-
-			// IE doesn't handle cropping, so we need an explicit width here.
-			// IE11 doesn't read rules inside this query. They are applied only to modern browsers.
-			@supports ( position: sticky ) {
-				width: auto;
-			}
+			width: auto;
 		}
 
 		figcaption {
@@ -80,22 +67,15 @@
 		&.is-style-rounded {
 			> div,
 			> a {
-				// Not supported in IE11.
-				@supports ( position: sticky ) {
-					flex: 1 1 auto;
-				}
+				flex: 1 1 auto;
 			}
 			figcaption {
+				flex: initial;
 				background: none;
-				// Not supported in IE11.
-				@supports ( position: sticky ) {
-					flex: initial;
-					background: none;
-					color: inherit;
-					margin: 0;
-					padding: 10px 10px 9px;
-					position: relative;
-				}
+				color: inherit;
+				margin: 0;
+				padding: 10px 10px 9px;
+				position: relative;
 			}
 		}
 	}
@@ -127,24 +107,15 @@
 		align-self: inherit;
 		> div:not(.components-drop-zone),
 		> a {
-			display: block; // Thanks to IE11 not supporting object-fit fall back to display: block.
-
-			// Without IE11 object-fit support "display: flex;" here causes distortion of aspect ratio.
-			@supports ( position: sticky ) {
-				display: flex;
-			}
+			display: flex;
 		}
 
 		a,
 		img {
 			width: 100%;
-
-			// IE11 doesn't read rules inside this query. They are applied only to modern browsers.
-			@supports ( position: sticky ) {
-				flex: 1 0 0%;
-				height: 100%;
-				object-fit: cover;
-			}
+			flex: 1 0 0%;
+			height: 100%;
+			object-fit: cover;
 		}
 	}