Bug 31241

Summary:

Absolutely positioned, inline elements within a container that horizontally centers

Product:

WebKit

Reporter:

samail91

Component:

Layout and Rendering

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED CONFIGURATION CHANGED

Severity:

Normal

CC:

ahmad.saleem792, karthikeyan.jambulingam, robert, robin, zalan

Priority:

Version:

528+ (Nightly build)

Hardware:

OS:

All

Bug Depends on:

4860, 77754

Bug Blocks:

Attachments:

Description	Flags
Reveals a rendering bug in webkit. Absolutely position, inline elements should remain centered until left or right properties are set.	none

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   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   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.