floating elements are incorrectly layout in webkit-box display
Categories
(Core :: Layout, defect)
Tracking
()
People
(Reporter: kramarczyk, Unassigned)
Details
Attachments
(2 files)
bug.png
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.54 Safari/537.36
Steps to reproduce:
Render following:
<html>
<head>
<style>
.wrapper {
line-height: 20px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
width: 400px;
background-color: lightgray;
}
.spacer1 {
width: 50px;
height: 20px;
background-color: red;
float: right;
}
.spacer2 {
width: 50px;
height: 20px;
background-color: green;
float: right;
clear: right;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="spacer1"></div>
<div class="spacer2"></div>
aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa
aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa
aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa
aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa
aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa
aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa
aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa
aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa
</div>
</body>
</html>
Actual results:
floating elements are no longer floating. See attached file.
Expected results:
floating elements are floating. See attached file.
|
||
Comment 1•3 years ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::Layout' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.
|
||
Comment 2•3 years ago
|
||
|
|
||
Updated•3 years ago
|
|
|
||
Comment 3•3 years ago
|
||
WebKit renders like us, except it doesn't actually paint the floats for some reason.
However, why would Chrome's rendering be the expected rendering? float is generally ignored in flexbox contexts, so I don't see why this would be different.
|
Reporter | |
Comment 4•3 years ago
|
||
(In reply to Emilio Cobos Álvarez (:emilio) from comment #3)
However, why would Chrome's rendering be the expected rendering?
floatis generally ignored in flexbox contexts, so I don't see why this would be different.
My understanding is thatdisplay: -webkit-boxis not the same samedisplay: flexand floating elements should not be ignored, but I might be mistaken since there's no official documentation for this as far as I am aware.
|
|
||
Comment 5•3 years ago
|
||
The severity field is not set for this bug.
:alaskanemily, could you have a look please?
For more information, please visit auto_nag documentation.
|
|
||
Comment 6•2 years ago
|
||
Rendering matches Chromium now.
Description
•