From e6d435f8826d6fb823f6334b466123bed4b06896 Mon Sep 17 00:00:00 2001
From: Brandon Payton <brandon@happycode.net>
Date: Thu, 21 Jun 2018 15:50:41 -0700
Subject: [PATCH] Fix IE11 formatting toolbar visibility (#7413)

IE11 does not support `position: sticky`, and we were using it
unconditionally to position the formatting toolbar, resulting in
a toolbar that was only partially visible. This updates our
styles to start with `position: relative` which also provides
a coordinate system but does not have the sticky behavior. Then
we apply `position: sticky` for the browsers that support it.
---
 editor/components/block-list/style.scss | 24 ++++++++++++++++--------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss
index 5ed138efdead7..a67b26bef41d5 100644
--- a/editor/components/block-list/style.scss
+++ b/editor/components/block-list/style.scss
@@ -366,7 +366,7 @@
 			}
 		}
 
-		// The padding collapses, but the outline is still 1px to compensate for. 
+		// The padding collapses, but the outline is still 1px to compensate for.
 		.editor-block-contextual-toolbar {
 			margin-bottom: 1px;
 		}
@@ -468,7 +468,7 @@
 		> .editor-block-list__breadcrumb {
 			right: -$border-width;
 		}
-		
+
 		// Compensate for main container padding and subtract border.
 		@include break-small() {
 			margin-left: -$block-side-ui-width - $block-padding - $block-side-ui-clearance - $border-width;
@@ -606,7 +606,7 @@
 	.editor-block-list__block-mobile-toolbar {
 		display: flex;
 		flex-direction: row;
-		margin-top: $item-spacing + $block-toolbar-height; // Make room for the height of the block toolbar above. 
+		margin-top: $item-spacing + $block-toolbar-height; // Make room for the height of the block toolbar above.
 		margin-right: -$block-padding;
 		margin-bottom: -$block-padding - $border-width;
 		margin-left: -$block-padding;
@@ -802,18 +802,26 @@
 	left: $block-padding;
 	right: $block-padding;
 
+	@include break-small() {
+		top: -$border-width;
+	}
+
 	// Position the contextual toolbar above the block.
 	@include break-mobile() {
-		position: sticky;
+		position: relative;
+		top: auto;
 		bottom: auto;
 		left: auto;
 		right: auto;
 		margin-top: -$block-toolbar-height - $border-width;
 		margin-bottom: $block-padding + $border-width;
-	}
 
-	@include break-small() {
-		top: -$border-width;
+		// IE11 does not support `position: sticky`.
+		@supports (position: sticky) {
+			position: sticky;
+			// Avoid appearance of double border when toolbar sticks at the top of the editor.
+			top: -$border-width;
+		}
 	}
 
 	// Floated items have special needs for the contextual toolbar position.
@@ -906,7 +914,7 @@
 		padding: 4px 4px;
 		background: theme( outlines );
 		color: $white;
-	
+
 		// Animate in
 		.editor-block-list__block:hover & {
 			@include fade_in( .1s );