writing mode: popover vertical further fix

This commit is contained in:
Yhëhtozr 2022-12-23 02:05:18 +09:00
parent ca23144975
commit ba3781c43a
3 changed files with 14 additions and 3 deletions

View file

@ -135,7 +135,7 @@ const Popover = {
if (origin.y - contentOffsetBlockSize < yBounds.min) usingTop = false
let vPadding = 0
if (this.removePadding && (usingTop || isVRL)) {
if (this.removePadding && usingTop) {
const anchorStyle = getComputedStyle(anchorEl)
vPadding = parseFloat(anchorStyle.paddingBlockStart) + parseFloat(anchorStyle.paddingBlockEnd)
}
@ -143,8 +143,8 @@ const Popover = {
// offset is repurposed as an abstract value set, as well as margin
const yOffset = (this.offset && this.offset.y) || 0
const translateY = usingTop
? -anchorBlockSize + vPadding - yOffset - contentOffsetBlockSize + (isVRL ? vPadding /* why do I need this argument? */ : 0)
: yOffset + (isVRL ? anchorBlockSize - vPadding : 0)
? -anchorBlockSize + vPadding - yOffset - contentOffsetBlockSize
: yOffset
const translateYLogical = isVRL ? -translateY : translateY
const xOffset = (this.offset && this.offset.x) || 0

View file

@ -318,6 +318,14 @@
min-inline-size: fit-content;
flex: 1;
}
/*
fix for the unknown factor that makes popover shift rightward
in vertical-rl mode on Firefox. Bug? To be investigated.
*/
_:lang(x)::-moz-placeholder, .#{$writing-mode-vertical}rl & .popover {
margin-block-start: 22px;
}
}
.muted {

View file

@ -36,6 +36,7 @@
<style lang="scss">
@import '../../_variables.scss';
@import '../../_logical.scss';
.TimelineMenu {
flex-shrink: 1;
@ -63,6 +64,8 @@
border-start-end-radius: 0;
border-start-start-radius: 0;
transform: translateY(-100%);
.#{$writing-mode-vertical}lr & { transform: translateX(-100%) }
.#{$writing-mode-vertical}rl & { transform: translateX(100%) }
transition: transform 100ms;
}