Bug 88199

Summary:

Text flowing outside of div

Product:

WebKit

Reporter:

Bob <bob.passaro>

Component:

CSS

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED FIXED

Severity:

Minor

CC:

keithjgrant, mitz, robert, shanestephens, simon.fraser

Priority:

Version:

528+ (Nightly build)

Hardware:

Mac

OS:

OS X 10.6

Attachments:

Description	Flags
Safari "web archive" file of affected page -- problem no longer visible on live site as a workaround fix was employed	none
Another Safarie 'web archive' showing the same issue on another post.	none
Reduction	none

Bob

Reported 2012-06-03 15:19:16 PDT

I don't know technically what is happening here. Just noticed this rendering problem in Safari and Chrome while building a site. Take a look at this blog post: http://nwbooklovers.org/2012/06/01/nw-book-lovers-chapter-two/ Scroll down about 3/4 of the way -- it's a kinda long post -- till you see a photo of a woman wearing a bike helmet at the subhead: "Interviews by Lindsey McGuirk" Look at the first line of text in the next paragraph and see if you notice part of the last word being clipped off -- this does not seem to be happening in Firefox or IE. If "overflow" is turned to "visible" you can see the rest of the clipped word, but it's still flowing outside of its div. Scroll around in the post and see if you see it where any of the other photos are floated into the margin area. What's going on here is that the main content div for the text of the post has 220px of left padding. The thumbnail photos (inside that div) are floated left with a -220px left margin so they go out into that open space. This issue has been discussed -- with a number of ideas offered -- at the css-discuss list-serve under the subject line "Text being clipped ..." None of the ideas seemed to work. It's very strange. It seems that maybe something to do with the float and the negative margin are causing the line of text to flow outside of its div? Thanks for looking into this.

Attachments
Safari "web archive" file of affected page -- problem no longer visible on live site as a workaround fix was employed (1.64 MB, application/x-webarchive) 2012-06-05 10:22 PDT, Bob	no flags	Details
Another Safarie 'web archive' showing the same issue on another post. (1.60 MB, application/x-webarchive) 2012-06-05 10:24 PDT, Bob	no flags	Details
Reduction (2.09 KB, text/html) 2012-06-05 10:47 PDT, Simon Fraser (smfr)	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Simon Fraser (smfr)

Comment 1 2012-06-04 16:28:02 PDT

I don't see the issue. Please attach a screenshot, and if you can, a simple reduction.

Bob

Comment 2 2012-06-05 10:22:29 PDT

Created attachment 145828 [details] Safari "web archive" file of affected page -- problem no longer visible on live site as a workaround fix was employed This page shows a post with the text being clipped on the right edge of the text column in some places where photographs are floated into the left margin.

Bob

Comment 3 2012-06-05 10:24:16 PDT

Created attachment 145829 [details] Another Safarie 'web archive' showing the same issue on another post. This also is not visible on the live site, as a workaround was employed

Simon Fraser (smfr)

Comment 4 2012-06-05 10:47:22 PDT

Created attachment 145837 [details] Reduction

Keith Grant

Comment 5 2012-10-11 07:32:37 PDT

I've got the same issue here: http://mexicansushi.net/?p=993 This time with a float: right and a negative margin-right on the <img> See the paragraph beginning, "The little man got his first haircut". It affects the first line of text only; it's flowing outside the container until it reaches the floated image. Here is a reduction to more simple markup: <!doctype html> <style type="text/css"> #container { width: 400px; } .post img { float: right; margin-right: -200px; } </style> <div id="container"> <p class="post"> <img src="http://pages.swcp.com/~jamii/OtherCats/coco.jpg" width="100"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin fringilla pharetra viverra. Fusce tristique vehicula mattis. Nam nulla nibh, porta tincidunt porta eu, hendrerit imperdiet arcu. Donec mollis nisi at neque scelerisque pretium. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse potenti. Integer malesuada erat id lorem semper nec ultricies mauris sagittis. In ac nulla justo, ac pretium augue. Integer sit amet arcu sed nisl auctor pellentesque. Vivamus malesuada dui eu arcu accumsan sit amet volutpat nibh convallis. Nam augue massa, ultrices a lacinia at, luctus gravida eros. Nunc magna felis, vestibulum vitae semper eget, porttitor non lacus. </p> </div>

Robert Hogan

Comment 6 2013-09-16 11:01:21 PDT

I can't reproduce the issue on trunk on any of the links or reductions. This issue looks fixed to me. Please re-open or comment if I'm wrong.

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