75277 2011-12-27 16:01:43 -0800 Images positioned incorrectly with CSS position:absolute inside position:relative with text-align:center 2022-07-12 16:23:48 -0700 1 1 1 Unclassified WebKit CSS 528+ (Nightly build) All All RESOLVED CONFIGURATION CHANGED https://www.google.com/m/places?source=mog&gl=us&sa=N#ipd:gl=us&mode=search&q=ritual%20roasters&source=ipd HasReduction, Regression P2 Normal --- 1 epenner webkit-unassigned bfulgham dtrebbien oldest_to_newest 527494 0 epenner 2011-12-27 16:01:43 -0800 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 734787 1 167119 dtrebbien 2012-10-04 10:14:53 -0700 Created attachment 167119 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. 1000304 2 dtrebbien 2014-04-13 10:53:59 -0700 See also: Bug 131592 1882721 3 bfulgham 2022-07-12 16:23:48 -0700 Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue. 167119 2012-10-04 10:14:53 -0700 2012-10-04 10:14:53 -0700 Test case Test case.html text/html 680 dtrebbien PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KPHN0eWxlPgpoMSB7IG1hcmdpbjogMDsgfQoK I2JhciB7CiAgICBwb3NpdGlvbjogcmVsYXRpdmU7CiAgICBib3JkZXI6IDFweCBzb2xpZCBibGFj azsKICAgIHdpZHRoOiAyNTBweDsKICAgIGhlaWdodDogNTBweDsKfQoKI2JhciA+IC5sZWZ0U3Bh Y2UgewogICAgcG9zaXRpb246IGFic29sdXRlOwogICAgbGVmdDogMDsKICAgIHdpZHRoOiA3MHB4 OwogICAgaGVpZ2h0OiAxMDAlOwogICAgYmFja2dyb3VuZC1jb2xvcjogcmdiYSgyNTUsIDAsIDAs IDAuMjUpOwp9CgojYmFyID4gaDEgewogICAgcG9zaXRpb246IGFic29sdXRlOwogICAgbGVmdDog MDsKICAgIHJpZ2h0OiAwOwogICAgYm94LXNpemluZzogYm9yZGVyLWJveDsKICAgIHBhZGRpbmct bGVmdDogNzBweDsKICAgIGZvbnQ6IGJvbGQgMjBweCAvIDUwcHggc2Fucy1zZXJpZjsKICAgIHRl eHQtYWxpZ246IGNlbnRlcjsKICAgIG92ZXJmbG93OiBoaWRkZW47CiAgICB0ZXh0LW92ZXJmbG93 OiBlbGxpcHNpczsKICAgIHdoaXRlLXNwYWNlOiBub3dyYXA7Cn0KPC9zdHlsZT4KPC9oZWFkPgo8 Ym9keT4KCjxkaXYgaWQ9ImJhciI+CjxkaXYgY2xhc3M9ImxlZnRTcGFjZSI+PC9kaXY+CjxoMT5U aGlzIGlzIGEgVGVzdCBCbGFoIEJsYWg8L2gxPgo8L2Rpdj4KCjwvYm9keT4KPC9odG1sPgo=