Skip to content

Commit

Permalink
Fix IE11 formatting toolbar visibility
Browse files Browse the repository at this point in the history
IE11 does not support `position: sticky`, and we were using it
unconditionally to position the formatting toolbar. 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.
  • Loading branch information
brandonpayton committed Jun 21, 2018
1 parent 64a7c83 commit 6c40c18
Showing 1 changed file with 16 additions and 8 deletions.
24 changes: 16 additions & 8 deletions editor/components/block-list/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -906,7 +914,7 @@
padding: 4px 4px;
background: theme( outlines );
color: $white;

// Animate in
.editor-block-list__block:hover & {
@include fade_in( .1s );
Expand Down

0 comments on commit 6c40c18

Please sign in to comment.