Page MenuHomePhabricator

Bullet Point Rendering Bug
Closed, DuplicatePublic

Description

This is a browser rendering bug in Wikimedia articles. After some experimentation, these are the specifics I have discovered so far for reproducing this effect:

  • A bullet point list is placed to the right of a left bound image, and continues down bellow the image.
  • User is using one of the affected browsers (Only confirmed for Opera and Firefox so far).
  • Browser is zoomed at a certain level (depends on the size of the image).

The resulting behavior is that the text after the first bullet point past the image is indented past the image, while the bullet point is not, resulting in strange whitespace.

A live example of this issue can be seen in the English Wikipedia article titled "Bomb Suit." It may be edited away at the time of you reading this, so please look back at this historical edit: https://en.wikipedia.org/w/index.php?title=Bomb_suit&oldid=830541314.

Picture of problem on 2560x1080 21:9 monitor in Opera browser with 100% zoom:

wikibug.PNG (1×2 px, 621 KB)

Event Timeline

Hey and another note... I tried to talk to developers on #WIkipedia IRC. Never joined it before, but I was banned automatically. Could use help with this, thanks!

@Lockethot: Can you please attach a screenshot of the problem, and/or tell us your screen width plus browser zoom level?

@Aklapper
Here is a snip:

wikibug.PNG (1×2 px, 621 KB)

My screen has a strange aspect ratio. Resolution is 2560x1080, aspect is 21:9. Perhaps this is one of the reasons for this issue, good point. Browser zoom is 100%, but like I said, changing the image size appears to change the zoom where this happens.

So far I have not managed to reproduce in Firefox...

Which specific HTML5 aspect is involved here, as you explicitly mentioned HTML5 in the task summary?

Is there something that makes you think this is a bug in the MediaWiki code base and not a bug that should be reported in the issue trackers of the affected web browsers?

@Lockethot: Could you answer my last comment please? Thanks!

This is just yet another version of the HTML/CSS weirdness that bullets are actually part of the background instead of the content, and are thus NOT pushed out of the way when (left) floating content, like the image in the screenshot is pushing the content aside.

On English wikipedia, there is Template:flowlist for this problem. But the general advise is to simply not put lists in the neighborhood of left floating elements.

We don't have a very good solution for this and it's correct HTML/CSS behavior, but the problem is tracked at T13782: List indicators overlap with left floating images/blocks.

TheDJ renamed this task from HTML5 Bullet Point Rendering Bug to Bullet Point Rendering Bug.Aug 21 2018, 7:03 PM
TheDJ updated the task description. (Show Details)

Particular article fixed by enforcing a clear of the left floating objects