Page MenuHomePhabricator

Top edge of image clobbers text
Open, LowPublic

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:

Details

Reference
bz13038

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).
bzimport created this task.Feb 16 2008, 7:18 PM
brion added a comment.Feb 26 2008, 1:19 AM

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

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptAug 30 2015, 11:14 PM
Isarra added a subscriber: Isarra.Nov 10 2015, 10:10 PM

Can anyone confirm this is still an issue anywhere?

Isarra moved this task from Backlog to Bugs on the MediaWiki-Interface board.Nov 10 2015, 10:27 PM
TheDJ added a subscriber: TheDJ.EditedDec 22 2015, 12:54 PM

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

gpaumier removed a subscriber: gpaumier.Jul 18 2018, 6:02 PM