WebKit Bugzilla
New
Browse
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
NEW
136361
Absolute positioned block inside an relative positioned flexible box item has a quirk layout.
https://bugs.webkit.org/show_bug.cgi?id=136361
Summary
Absolute positioned block inside an relative positioned flexible box item has...
Guo Kai
Reported
2014-08-28 20:27:02 PDT
Look the code below, the layout and position of div.icon-b element maybe wrong, it should be at the bottom of the div.right element. But when i change div.icon-a to position: relative, the layout looks right. <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="flexbox-wrapper"> <div class="left">Left</div> <div class="right"> <div class="icon-a">A</div> <div class="icon-b">B</div> </div> </div> <style type="text/css"> * { margin: 0; padding: 0; } .flexbox-wrapper { display: -webkit-box; line-height: 100px; margin: 100px 0 0; } .left { -webkit-box-flex: 1; background: #eee; } .right { -webkit-box-flex: 1; background: #ccc; position: relative; } .right .icon-a { position: absolute; width: 20px; height: 20px; line-height: 20px; top: 0; left: 10px; background: red; } .right .icon-b { position: absolute; width: 20px; height: 20px; line-height: 20px; bottom: 0; left: 10px; background: blue; } </style> </body> </html>
Attachments
flexbox-test.html shows the quirk layout which i mentioned.
(1.03 KB, text/html)
2014-08-28 20:28 PDT
,
Guo Kai
no flags
Details
View All
Add attachment
proposed patch, testcase, etc.
Guo Kai
Comment 1
2014-08-28 20:28:33 PDT
Created
attachment 237336
[details]
flexbox-test.html shows the quirk layout which i mentioned.
Guo Kai
Comment 2
2014-09-03 22:29:56 PDT
Anybody here?
Simon Fraser (smfr)
Comment 3
2014-09-03 22:48:33 PDT
Yes but this is not high priority.
Ahmad Saleem
Comment 4
2022-09-20 10:27:45 PDT
I am able to reproduce this bug in Safari 16 and Safari Technology Preview 153 using attached test case and A & B are not spread apart like the other browser (Chrome Canary 108 and Firefox Nightly 107). Just wanted to share updated testing results. Thanks!
Ahmad Saleem
Comment 5
2022-09-20 10:34:34 PDT
By any change this is related to
bug 210243
?
Note
You need to
log in
before you can comment on or make changes to this bug.
Top of Page
Format For Printing
XML
Clone This Bug