css wrong element position relative absolute padding
Categories
(Core :: Layout, defect)
Tracking
()
People
(Reporter: alexander.maas, Unassigned)
Details
Attachments
(2 files)
WrongElementPosition.png
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:125.0) Gecko/20100101 Firefox/125.0
Steps to reproduce:
<!DOCTYPE html>
<html>
<head>
<title>Firefox CSS Rendering Bug - Wrong Element Position</title>
<style>
.ui-container {
width: 0px;
padding: 4px 100px;
background-color: #F80;
}
.ui-frame {
border: solid 1px #FFF;
padding-right: 16px;
position: relative;
}
.ui-icon {
display: block;
width: 16px;
height: 16px;
background-color: black;
position: absolute;
}
</style>
</head>
<body>
<div class="ui-container">
<span class="ui-frame">
<span class="ui-icon"></span>
</span>
</div>
</body>
</html>
Actual results:
We see an orange container with a white frame.
The black box should appear within the frame, but it is on the right edge of the container.
Expected results:
Chromium renders this scenario imo correctly (black box is centered within the frame)
|
Reporter | |
Comment 1•1 year ago
|
||
|
||
Comment 2•1 year ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::Layout' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.
|
||
Comment 3•1 year ago
|
||
Hm. Oddly enough, toggling relative positioning for .ui-frame changes the positioning of .ui-icon.
I also see that .ui-icon's positioning does not seem right at a glance - its top/bottom/left/right values are -1/4/99/-99 px,
Description
•