If the writing-mode of the Containing Block is vertical-rl, position: absolute left: auto does not work as expected.
Categories
(Core :: Layout: Positioned, defect)
Tracking
()
People
(Reporter: tachbana, Unassigned)
Details
Attachments
(9 files)
image.png
Steps to reproduce:
In the following conditions, the element placement is incorrect.
- position property is absolute
- Containing Block is not the nearest ancestor element
- The writing-mode of the Containing Block is vertical-rl
- Containing Block is not defined as an absolute value
<html>
<head>
<style>
.page_v {
position: relative;
display: inline-block;
writing-mode: vertical-rl;
padding-top: 3em;
}
.block {
position: static;
}
.headerComment {
position: absolute;
writing-mode: lr;
font-size: 12px;
color: blueviolet;
}
.writing_v {
top: 0;
bottom: auto;
left: auto;
right: auto;
}
</style>
</head>
<body>
<div class="page_v">
<div class="block">
あいうえお<span class="headerComment writing_v">No.1</span>あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお
</div>
<hr/>
あいうえお<span class="headerComment writing_v">No.2</span>あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお
<hr/>
<div class="block">
あいうえお<span class="headerComment writing_v">No.3</span>あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお
</div>
</div>
</body>
</html>
Expected results:
image.png: result and expected result
|
||
Comment 1•3 years ago
|
||
Nothing to do with Japanese localization. Tentatively moving to Core::Text and Fonts, although it might belong to a different component.
|
||
Comment 2•3 years ago
|
||
|
|
||
Comment 3•3 years ago
|
||
Not really a Text & Fonts issue; this looks more like absolute positioning mishandles the writing mode.
|
||
Comment 4•3 years ago
|
||
Today I ran into a similar problem. It seems that margins of the absolute element are involved with miscalculation of position. Somehow the vertical-lr writing mode looks unaffected by this issue. Using logical or physical inset properties doesn't change the situation.
Each yellow box from the left: default (horizontal-lr), vertical-rl, vertical-lr, sideways-rl, sideways-lr
(sideways-lr might also look fine at the first sight, but see below)
|
|
||
Comment 5•3 years ago
|
||
The original state, FF 108.0.1
|
|
||
Comment 6•3 years ago
|
||
inset-inline-start zeroed, FF 108.0.1
|
|
||
Comment 7•3 years ago
|
||
inset-inline-start and margin-inline zeroed, FF 108.0.1
|
|
||
Comment 8•3 years ago
|
||
inset-inline-start and margin-block zeroed, FF 108.0.1
|
|
||
Comment 9•3 years ago
|
||
GC 108.0.5359.125 (sideways-* are not working)
|
|
||
Comment 10•3 years ago
|
||
Nope, I just found out that giving each parent direction: rtl suddenly breaks *-lr modes. (FF 108.0.1)
Description
•