75277 – Images positioned incorrectly with CSS position:absolute inside position:relative with text-align:center

RESOLVED CONFIGURATION CHANGED 75277

Images positioned incorrectly with CSS position:absolute inside position:relative with text-align:center

https://bugs.webkit.org/show_bug.cgi?id=75277

Summary Images positioned incorrectly with CSS position:absolute inside position:rela...

Eric Penner

Reported 2011-12-27 16:01:43 PST

The image below should be centered. It is centered on Safari but not on the webkit nightly. <!DOCTYPE html> <html> <head> <style> .Outer { text-align: center; } .Inner { position:relative; height:178px; width:318px; display:inline-block; border:1px solid #aaa; } .Image { position:absolute; top: 0; background:blue;} </style> </head> <body> <div class="Outer"> <div class="Inner"> <img class="Image" src='' width="318" height="178"> </div> </div> </body> </html> Or go here with a mobile user-agent: https://www.google.com/m/places?source=mog&gl=us&sa=N#ipd:gl=us&mode=search&q=ritual%20roasters&source=ipd

Attachments
Test case (680 bytes, text/html) 2012-10-04 10:14 PDT, Daniel Trebbien	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Daniel Trebbien

Comment 1 2012-10-04 10:14:53 PDT

Created attachment 167119 [details] Test case This is a test case which demonstrates the problem. It seems that with text-align:center, WebKit is centering the H1 text *as if* the H1's width were offsetWidth + paddingLeft + paddingRight. This test case renders correctly in Safari 6.0.1 and Firefox 15.0.1, but not in Chrome 22.0.1229.79, Chrome 24.0.1286.0 canary, or WebKit r130371 built on 04 October 2012. This problem also affects iOS 6 Mobile Safari, but not iOS 5.1 Mobile Safari. Getting rid of text-align:center fixes the problem in this case because the text width is larger than its container anyway.

Daniel Trebbien

Comment 2 2014-04-13 10:53:59 PDT