Page MenuHomePhabricator

Top edge of image clobbers text
Closed, ResolvedPublic

Description

Author: dgriffi

Description:
image clobbering text

This problem has been confirmed visible with Firefox and IE. I'm not sure if the bug is in Wiki or not. Under circumstances that I have not yet worked out, a section of text gets mistakenly written behind an image. The URL referenced above shows this problem. If it doesn't immediately manifest for you, adjust the width of the browser window. If that doesn't work, see the attached file.


Version: unspecified
Severity: enhancement
URL: http://en.wikipedia.org/w/index.php?title=Muhammad&oldid=191761034

Attached:

Muhimage.png (687×1 px, 236 KB)

Event Timeline

bzimport raised the priority of this task from to Low.Nov 21 2014, 10:08 PM
bzimport set Reference to bz13038.
bzimport added a subscriber: Unknown Object (MLST).

This is one of those browser bugs that depends on a certain confluence of font sizes, etc.

Can anyone confirm this is still an issue anywhere?

This happens if the top of a text block is higher than the top of the floating block preceding it. The CSS float model only accounts for the top edge of content, not for the space it occupies and allows for overlap of the floating content, with the static positioned content. (which is a bit unnatural in almost every situation, but apparently not important enough to fix the rendering spec for)

In running text this doesn't happen often, as both these specific element (p and thumbnail), at least now, have the same .5em top margin, will thus have the same starting height, and thus there is no problem.

This same issue (of the image top being too low), can be caused (and I think this screenshot shows that problem), by other elements pushing the image down. This pushing down of the left floating box occurs if the preceding right floating block (image titled: "the earliest surviving depiction" ) has to right clear another preceding right floating block (in this case the navigation box) that is wider than itself. It will then also clear the other box (or actually, a 'reset' of the algorithm occurs if I remember correctly) to be no higher than the bottom of the right floating wider element, which effectively moves it down to be 'lower' than the text, in which case overlapping is to be expected according to the float spec.

So both are expected details of CSS, but combined, they create something that is unexpected for some users, since it requires so many layout quirks to trigger, that usually we don't see this thing. The workaround for this (and the spec even tells you to do this) is to put all right floating elements in one right floated ancestor block, instead of stacking them. But I don't think our editors would appreciate that in most cases, so we have have Template:Stack, which can be used to counter a problem like this if is becomes really annoying.

So an 'expected' but uncommon issue, which is hard to work around due to the nature of HTML/CSS specs. I'm quite sure we have another ticket describing this problem... somewhere...

Change 321571 had a related patch set uploaded (by Eileen):
Comment to explain salt-wierdness

https://gerrit.wikimedia.org/r/321571

Change 321571 merged by jenkins-bot:
Comment to explain salt-wierdness

https://gerrit.wikimedia.org/r/321571

Jdlrobson claimed this task.
Jdlrobson subscribed.

I'm assuming given the age this bug is fixed.