Skip to content

Commit

Permalink
Switch to alternative z-index hack for safari
Browse files Browse the repository at this point in the history 
We were previously using translate3d to force safari to deal correctly z-index stacking (by forcing it to recompute stacking). We were relying on a no-op translate to cause this recompute, but that has the side effect of making `fixed` position elements not work, since the position of the root element is being translated. Use of a non-zero opacity has the same effect, but doesn’t affect `fixed` children.

Fixes #7361
  • Loading branch information
@dragonstyle
dragonstyle committed Dec 14, 2023
1 parent 24672a4 commit 284dcdf
Showing 1 changed file with 31 additions and 28 deletions.
59 changes: 31 additions & 28 deletions src/resources/formats/html/bootstrap/_bootstrap-rules.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -337,49 +337,49 @@ body.docked {
.page-columns .column-body-outset {
grid-column: body-start-outset / body-end-outset;
z-index: $zindex-pagelayout;
transform: translate3d(0, 0, 0);
opacity: 0.999;
@include column-spanning-element();
}

.page-columns .column-body-outset-left {
grid-column: body-start-outset / body-content-end;
z-index: $zindex-pagelayout;
transform: translate3d(0, 0, 0);
opacity: 0.999;
@include column-spanning-element();
}

.page-columns .column-body-outset-right {
grid-column: body-content-start / body-end-outset;
z-index: $zindex-pagelayout;
transform: translate3d(0, 0, 0);
opacity: 0.999;
@include column-spanning-element();
}

.page-columns .column-page {
grid-column: page-start / page-end;
z-index: $zindex-pagelayout;
transform: translate3d(0, 0, 0);
opacity: 0.999;
@include column-spanning-element();
}

.page-columns .column-page-inset {
grid-column: page-start-inset / page-end-inset;
z-index: $zindex-pagelayout;
transform: translate3d(0, 0, 0);
opacity: 0.999;
@include column-spanning-element();
}

.page-columns .column-page-inset-left {
grid-column: page-start-inset / body-content-end;
z-index: $zindex-pagelayout;
transform: translate3d(0, 0, 0);
opacity: 0.999;
@include column-spanning-element();
}

.page-columns .column-page-inset-right {
grid-column: body-content-start / page-end-inset;
z-index: $zindex-pagelayout;
transform: translate3d(0, 0, 0);
opacity: 0.999;
figcaption {
@include column-spanning-element();
}
Expand All @@ -388,14 +388,14 @@ body.docked {
.page-columns .column-page-left {
grid-column: page-start / body-content-end;
z-index: $zindex-pagelayout;
transform: translate3d(0, 0, 0);
opacity: 0.999;
@include column-spanning-element();
}

.page-columns .column-page-right {
grid-column: body-content-start / page-end;
z-index: $zindex-pagelayout;
transform: translate3d(0, 0, 0);
opacity: 0.999;
figcaption {
@include column-spanning-element();
}
Expand Down Expand Up @@ -426,42 +426,42 @@ body.docked {
.page-columns .column-screen-inset {
grid-column: screen-start-inset / screen-end-inset;
z-index: $zindex-pagelayout;
transform: translate3d(0, 0, 0);
opacity: 0.999;
@include column-spanning-element();
}

.page-columns .column-screen-inset-left {
grid-column: screen-start-inset / body-content-end;
z-index: $zindex-pagelayout;
transform: translate3d(0, 0, 0);
opacity: 0.999;
@include column-spanning-element();
}

.page-columns .column-screen-inset-right {
grid-column: body-content-start / screen-end-inset;
z-index: $zindex-pagelayout;
transform: translate3d(0, 0, 0);
opacity: 0.999;
@include column-spanning-element();
}

.page-columns .column-screen {
grid-column: screen-start / screen-end;
z-index: $zindex-pagelayout;
transform: translate3d(0, 0, 0);
opacity: 0.999;
@include column-spanning-element();
}

.page-columns .column-screen-left {
grid-column: screen-start / body-content-end;
z-index: $zindex-pagelayout;
transform: translate3d(0, 0, 0);
opacity: 0.999;
@include column-spanning-element();
}

.page-columns .column-screen-right {
grid-column: body-content-start / screen-end;
z-index: $zindex-pagelayout;
transform: translate3d(0, 0, 0);
opacity: 0.999;
@include column-spanning-element();
}

Expand All @@ -470,23 +470,23 @@ body.docked {
padding: 1em;
background: $light;
z-index: $zindex-pagelayout;
transform: translate3d(0, 0, 0);
opacity: 0.999;
margin-bottom: 1em;
}

.zindex-content {
z-index: $zindex-pagelayout;
transform: translate3d(0, 0, 0);
opacity: 0.999;
}

.zindex-modal {
z-index: $zindex-modal;
transform: translate3d(0, 0, 0);
opacity: 0.999;
}

.zindex-over-content {
z-index: #{$zindex-dropdown - 1};
transform: translate3d(0, 0, 0);
opacity: 0.999;
}

img.img-fluid.column-screen,
Expand Down Expand Up @@ -549,7 +549,7 @@ img.img-fluid.column-screen-right {
.column-margin {
grid-column: body-content-start / body-content-end !important;
z-index: $zindex-pagelayout;
transform: translate3d(0, 0, 0);
opacity: 0.999;
}
.no-row-height {
height: initial;
Expand All @@ -565,7 +565,7 @@ img.img-fluid.column-screen-right {
.column-margin {
grid-column: body-content-start / body-content-end !important;
z-index: $zindex-pagelayout;
transform: translate3d(0, 0, 0);
opacity: 0.999;
}
.no-row-height {
height: initial;
Expand Down Expand Up @@ -2021,42 +2021,42 @@ code.sourceCode a.code-annotation-anchor {
.page-columns .column-screen-inset {
grid-column: page-start-inset / page-end-inset;
z-index: $zindex-pagelayout;
transform: translate3d(0, 0, 0);
opacity: 0.999;
@include column-spanning-element();
}

.page-columns .column-screen-inset-left {
grid-column: page-start-inset / body-content-end;
z-index: $zindex-pagelayout;
transform: translate3d(0, 0, 0);
opacity: 0.999;
@include column-spanning-element();
}

.page-columns .column-screen-inset-right {
grid-column: body-content-start / page-end-inset;
z-index: $zindex-pagelayout;
transform: translate3d(0, 0, 0);
opacity: 0.999;
@include column-spanning-element();
}

.page-columns .column-screen {
grid-column: page-start / page-end;
z-index: $zindex-pagelayout;
transform: translate3d(0, 0, 0);
opacity: 0.999;
@include column-spanning-element();
}

.page-columns .column-screen-left {
grid-column: page-start / body-content-end;
z-index: $zindex-pagelayout;
transform: translate3d(0, 0, 0);
opacity: 0.999;
@include column-spanning-element();
}

.page-columns .column-screen-right {
grid-column: body-content-start / page-end;
z-index: $zindex-pagelayout;
transform: translate3d(0, 0, 0);
opacity: 0.999;
@include column-spanning-element();
}

Expand All @@ -2065,7 +2065,7 @@ code.sourceCode a.code-annotation-anchor {
padding: 1em;
background: $light;
z-index: $zindex-pagelayout;
transform: translate3d(0, 0, 0);
opacity: 0.999;
margin-bottom: 1em;
}
}
Expand Down Expand Up @@ -2114,3 +2114,6 @@ code.sourceCode a.code-annotation-anchor {
margin-right: unset;
}
}

// Special HACK for bslib cards - we use translate on the root element sometimes, so when we do this, also
// fix up bslib cards to be sticky rather than fixed.

0 comments on commit 284dcdf

Please sign in to comment.