Bug 78671 - Position:absolute'd inline components (e.g. <span>) after text at the end of container width BUG!!
Summary: Position:absolute'd inline components (e.g. <span>) after text at the end of ...
Status: RESOLVED CONFIGURATION CHANGED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: 528+ (Nightly build)
Hardware: Unspecified Unspecified
: P2 Major
Assignee: Nobody
URL: http://jsfiddle.net/zVp4n/1/
Keywords:
Depends on:
Blocks:
 
Reported: 2012-02-15 00:28 PST by davied.poenja.imeil
Modified: 2023-02-24 09:48 PST (History)
3 users (show)

See Also:


Attachments
screen shot (6.29 KB, image/png)
2012-02-15 00:35 PST, davied.poenja.imeil
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description davied.poenja.imeil 2012-02-15 00:28:56 PST
Look at this code, http://jsfiddle.net/zVp4n/1/
Open it in webkit browsers, the 1st red span will be on the beginning of new line. While it should be on the right of the text. The 2nd red span is in good position..

I figured out that the text on the first <li> end exactly at the end of the container width. It simply made the next element, even an inline element, will go to the beginning of the should-be-the-next line. I assume an inline element with "position: absolute" should be beside the end of the text.

Frankly, please open it on other browsers. It will show the correct output with the 1st red span is on the right of the end of text..

Is it bug? Please fix this.. Or is there any CSS fix that could do it?
Comment 1 davied.poenja.imeil 2012-02-15 00:35:18 PST
Created attachment 127125 [details]
screen shot
Comment 2 SravanKumar S(:sravan) 2012-05-19 03:43:17 PDT
(In reply to comment #0)
> Look at this code, http://jsfiddle.net/zVp4n/1/
> Open it in webkit browsers, the 1st red span will be on the beginning of new line. While it should be on the right of the text. The 2nd red span is in good position..
> 

The 2nd red span is in good position only because you mis-spelled "quisa", a in quisa is missing in second list item. If you add a, then you will see the buggy behaviour w.r.t 2nd span element too.

> I figured out that the text on the first <li> end exactly at the end of the container width. It simply made the next element, even an inline element, will go to the beginning of the should-be-the-next line. I assume an inline element with "position: absolute" should be beside the end of the text.
> 
> Frankly, please open it on other browsers. It will show the correct output with the 1st red span is on the right of the end of text..
> 
> Is it bug? Please fix this.. Or is there any CSS fix that could do it?

Yes it is a bug in webkit based browsers. And, it is observed that by increasing div css width by 1/2pixel such that red span falls in to div size, then this issue is not observed.
Comment 3 Ahmad Saleem 2023-02-24 09:48:02 PST
All browsers are rendering this JSFiddle same (Chrome Canary 112, Firefox Nightly 112 and Safari Technology Preview 164).

Marking this as "RESOLVED CONFIGURATION CHANGED". Thanks!