Bug 75277 - Images positioned incorrectly with CSS position:absolute inside position:relative with text-align:center
Summary: Images positioned incorrectly with CSS position:absolute inside position:rela...
Status: RESOLVED CONFIGURATION CHANGED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Normal
Assignee: Nobody
URL: https://www.google.com/m/places?sourc...
Keywords: HasReduction, Regression
Depends on:
Blocks:
 
Reported: 2011-12-27 16:01 PST by Eric Penner
Modified: 2022-07-12 16:23 PDT (History)
2 users (show)

See Also:

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

Note You need to log in before you can comment on or make changes to this bug.
Description Eric Penner 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
Comment 1 Daniel Trebbien 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.
Comment 2 Daniel Trebbien 2014-04-13 10:53:59 PDT 
See also:  Bug 131592
Comment 3 Brent Fulgham 2022-07-12 16:23:48 PDT 
Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.