Bug 53855

Summary:

A WebKit's CSS floating bug

Product:

WebKit

Reporter:

Wei Lou <weilou.happy>

Component:

CSS

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED CONFIGURATION CHANGED

Severity:

Normal

CC:

ahmad.saleem792, ap, bfulgham, karlcow, koivisto, ntim, rniwa, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

InRadar

Version:

528+ (Nightly build)

Hardware:

OS:

Windows Vista

Attachments:

Description	Flags
Screenshot on Chrome 9 (The situation on Safari is the same)	none

Wei Lou

Reported 2011-02-05 08:04:52 PST

Created attachment 81362 [details] Screenshot on Chrome 9 (The situation on Safari is the same) I also reported this bug to Chromium: http://code.google.com/p/chromium/issues/detail?id=71775 Chrome Version : 9.0.597.84 (正式版本 70801) for Win Vista Other browsers tested: Safari 5.0.3: Fail Firefox 3.6.13: OK Firefox 4 beta 10: OK IE 9: OK IE 8: OK IE 7: Fail IE 6: Fail To reproduce this problem on Chrome 8, IE7 and IE8: <!DOCTYPE html> <meta charset="utf-8"> <title>An HTML5 document</title> <div style="background:red; height:300px; width:1500px;"> WWWWWWW<br>WWWWWWW<br>WWWWWWW<br>WWWWWWW<br>WWWWWWW<br>WWWWWWW <img src="http://www.google.com/images/logos/ps_logo2.png" style="float:left;" width="900" height="230"> </div> <div style="background:green; color:yellow; font-weight:bolder; height:300px; width:1000px;"> asc aca ascacaaaaab<img style="vertical-align:top; float:left;" src="http://i3.ytimg.com/vi/F5qniuZG8Rg/default.jpg">Q </div> To reproduce this problem on Safari 5.0.3 using codes below: <!DOCTYPE html> <meta charset="utf-8"> <title>An HTML5 document</title> <div style="background:red; height:300px; width:1500px;"> WWWWWWW<br>WWWWWWW<br>WWWWWWW<br>WWWWWWW<br>WWWWWWW<br>WWWWWWW <img src="http://www.google.com/images/logos/ps_logo2.png" style="float:left;" width="900" height="230"> </div> <div style="background:green; color:yellow; font-weight:bolder; height:300px; width:1000px;"> asc aca ascacaaaaaab<img style="vertical-align:top; float:left;" src="http://i3.ytimg.com/vi/F5qniuZG8Rg/default.jpg">Q </div> This problem will not happen on Firefox 3.6.13, Firefox 4 beta 10, IE9 and IE 8. The second image should not display after the character "Q" at another line.

Attachments
Screenshot on Chrome 9 (The situation on Safari is the same) (214.95 KB, image/png) 2011-02-05 08:04 PST, Wei Lou	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Ahmad Saleem

Comment 1 2022-07-23 08:59:19 PDT

All browsers have different output in the attached test case in Comment 0, I have changed it into JSFiddle: Link - https://jsfiddle.net/3me9xqst/show Current Safari 15.6 on macOS 12.5 behaves same as attached screenshot while Chrome Canary 106 and Firefox Nightly 104 are different as well and no two browsers match each other. I am not clear on web-spec, so please add details accordingly. Thanks!

Radar WebKit Bug Importer

Comment 2 2022-07-23 10:33:48 PDT

<rdar://problem/97487324>

Karl Dubost

Comment 3 2023-02-05 16:59:33 PST

The test case is a bit confusing. It probably needs something simpler.

alan

Comment 4 2023-02-05 19:20:04 PST

Trunk WebKit and Chrome produce the same rendering for the "To reproduce this problem on Safari 5.0.3 using codes below:" test case. This is an IFC progression.

Note You need to log in before you can comment on or make changes to this bug.