RESOLVED CONFIGURATION CHANGED 31241
Absolutely positioned, inline elements within a container that horizontally centers 
https://bugs.webkit.org/show_bug.cgi?id=31241
Summary Absolutely positioned, inline elements within a container that horizontally c...
samail91
Reported 2009-11-08 10:38:18 PST
Created attachment 42715 [details] Reveals a rendering bug in webkit. Absolutely position, inline elements should remain centered until left or right properties are set. Whenever an an inline element's position property is set to absolute and the left, right, top and bottom properties are left to their defaults(auto), and the parent element has text-align property set to center, the element does not keep it's position. CSS: #element { position: absolute; } #parent { text-align: center; width: 500px; height: 300px; } HTML: <div id="parent"> <span id="element">Test</span> </div> The span should remain centered within it's parent until the left or right properties are explicitly set. However, if we add an inline element or text before the span: <div id="parent"> Text or &nbsp; or <span>some other inline element</span><span id="element">Test</span> </div> The element centers along with the elements/text before it. I've attached an example that shows the unexpected behavior that occurs if the position property was set to absolute via javascript.
Attachments
Reveals a rendering bug in webkit. Absolutely position, inline elements should remain centered until left or right properties are set. (1.60 KB, text/html)
2009-11-08 10:38 PST, samail91 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Shamil Kerimov
Comment 1 2010-05-20 08:30:22 PDT
I can also confirm this bug in latest WebKit nightly build (r59821)
karthikeyan.jambulingam
Comment 2 2010-12-24 06:25:20 PST
The bug is still alive in Chrome 8.0 build , is there any work around other than adding a text or &nbsp; to make it work.
Robert Hogan
Comment 3 2011-08-03 12:18:21 PDT
I haven't confirmed the test case against the patch there but I think this is related to 4860.
Robin Whittleton
Comment 4 2012-02-25 12:26:09 PST
The most minimal testcase I can make is: <!DOCTYPE html> <style> body { text-align: center; } span { position: absolute; } </style> <span>Test
Robert Hogan
Comment 5 2013-04-01 05:54:51 PDT
I don't think there's anything to fix here anymore. Would you mind confirming?
Ahmad Saleem
Comment 6 2023-07-25 01:48:05 PDT
I am unable to reproduce this bug in Safari 16.6 using attached test case and one from Comment 04 and it matches Chrome Canary 117.
Note You need to log in before you can comment on or make changes to this bug.