Bug 136361

Summary: Absolute positioned block inside an relative positioned flexible box item has a quirk layout.
Product: WebKit Reporter: Guo Kai <badkaikai>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: ahmad.saleem792, ap, bfulgham, simon.fraser, zalan
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: Mac (Intel)   
OS: OS X 10.9   
Attachments:
Description Flags
flexbox-test.html shows the quirk layout which i mentioned. none

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.