From 82276e622e458ec101e6364c214ee56588f5d865 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Fri, 23 Nov 2018 09:40:53 +0100
Subject: [PATCH] Fix modals in Edge.

This PR fixes #11585.

Edge has a buggy implementation of `position: sticky;`, which includes issues with flickering, z-index, and parent container paddings. See more at https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/17555420/.

This is mainly an issue in deeply nested elements, it seems.

This PR includes an edge only hack that overrides the sticky and uses `position: fixed;` instead.
---
 packages/components/src/modal/style.scss | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss
index 16b5e165ad1d0..99a76a85598c7 100644
--- a/packages/components/src/modal/style.scss
+++ b/packages/components/src/modal/style.scss
@@ -66,13 +66,20 @@
 	justify-content: space-between;
 	background: $white;
 	align-items: center;
-	box-sizing: border-box;
 	height: $header-height;
 	position: sticky;
 	top: 0;
 	z-index: z-index(".components-modal__header");
 	margin: 0 -#{ $grid-size-large } $grid-size-large;
 
+	// Rules inside this query are only run by Microsoft Edge.
+	// Edge has bugs around position: sticky;, so it needs a separate top rule.
+	// See also https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/17555420/.
+	@supports (-ms-ime-align:auto) {
+		position: fixed;
+		width: 100%;
+	}
+
 	.components-modal__header-heading {
 		font-size: 1em;
 		font-weight: 400;
@@ -107,4 +114,10 @@
 	box-sizing: border-box;
 	height: 100%;
 	padding: 0 $grid-size-large $grid-size-large;
+
+	// Rules inside this query are only run by Microsoft Edge.
+	// This is a companion top padding to the fixed rule in line 77.
+	@supports (-ms-ime-align:auto) {
+		padding-top: $header-height;
+	}
 }