Page MenuHomePhabricator

Resize an image floating close to a list moves the bullets
Closed, ResolvedPublic1 Estimated Story Points

Assigned To
None
Authored By
Trizek-WMF
Sep 7 2017, 8:28 AM
Referenced Files
F9648021: Screen Shot 2017-09-19 at 15.16.37.png
Sep 19 2017, 1:24 PM
F9453213: Screen Shot 2017-09-11 at 11.48.19.png
Sep 11 2017, 10:52 AM
F9453248: Screen Shot 2017-09-11 at 11.49.51.png
Sep 11 2017, 10:52 AM
F9453176: Screen Shot 2017-09-11 at 11.46.27.png
Sep 11 2017, 10:52 AM
F9369014: Capture d’écran_2017-09-07_09-48-29.png
Sep 7 2017, 8:28 AM
F9369012: Capture d’écran_2017-09-07_09-48-15.png
Sep 7 2017, 8:28 AM

Description

Using VE to edit a page on a LTR wiki:

  1. create a list of items with bulletpoints
  2. add an image before the list or at the beginning of it
  3. float the image to the left
    Capture d’écran_2017-09-07_09-48-15.png (214×462 px, 38 KB)
  4. resize the image, bullets are moving
    Capture d’écran_2017-09-07_09-48-29.png (195×404 px, 32 KB)

They stay like this while you continue editing the page. There is no impact on the final publishing.

Event Timeline

Can you link to a page? That looks a lot like a browser bug, so there may be nothing we can do...

Deskana moved this task from To Triage to TR1: Releases on the VisualEditor board.
Deskana subscribed.

This needs further investigation.

I tried this in Chrome on a Mac, but had a different problem where the bullets ended up inside the image. The page saved correctly, however.

Screen Shot 2017-09-11 at 11.46.27.png (666×1 px, 731 KB)

The problem did not occur at all in Firefox.

Screen Shot 2017-09-11 at 11.48.19.png (474×974 px, 326 KB)

The problem also did not occur at all in Safari.

Screen Shot 2017-09-11 at 11.49.51.png (546×966 px, 478 KB)

Note that bullets next to floating items are inherently somewhat problematic in HTML/CSS. It's why we have Template flowlist on English Wikipedia.

Normal lists have their markers in the (left) margin. Floating content, overlaps with existing elements and then 'pushes' the content out of the way. However it does not take into account margins when it does so (as they 'don't contain content'). This can easily be seen from the inspector:

Screen Shot 2017-09-19 at 15.16.37.png (486×522 px, 55 KB)

This can be countered with list-item-position:inside but that has the nasty side effect that your 2nd and consecutive lines will be aligned with the left side of your list marker... Which is undesirable as well.

See also: T13782: List indicators overlap with left floating images/blocks

Can you link to a page? That looks a lot like a browser bug, so there may be nothing we can do...

I've tried it on mediawiki.org and on French Wikipedia. I don't have it on Firefox, only on Chromium/Ubuntu (my bad, I forgot to mention it).

Deskana set the point value for this task to 1.Oct 11 2017, 9:40 PM
matmarex subscribed.

I can't reproduce this today. I suppose it was a browser bug.