Twenty Sixteen: Microsoft Edge -- List Item Display Problem

[pracko]

When a left-aligned image is adjacent to a UL in MS Edge browser, a large gap appears between the list-item disc and the text within the LI.

This problem does not occur in Chrome or Firefox.

​https://imgur.com/NPYJ7Pw

[joyously]

I think I've seen it in SeaMonkey browser.

[SergeyBiryukov]

Hi @pracko, welcome to WordPress Trac! Thanks for the report.

Which theme are you seeing the issue in?

[pracko]

Replying to SergeyBiryukov:

Hi @pracko, welcome to WordPress Trac! Thanks for the report.

Which theme are you seeing the issue in?

I have tested and confirmed this problem on both Twenty Sixteen and Customify themes. Here is screenshot of the problem in Twenty Sixteen (previous screenshot is using Customify) :

​https://imgur.com/a/OPy7k2R

[sabernhardt]

Twenty Sixteen: lists next to a left-aligned image in Edge 91 (Windows)

[sabernhardt]

The modern, Chromium-based Edge correctly places list item markers next to the text. I can't test legacy Edge, but Internet Explorer 11 had the same problem with the markers after a left-floated element (in Twenty Fifteen and Twenty Seventeen as well).

A different issue with the aligned images is that now the block default style overrides the Twenty Sixteen margins for alignleft and alignright, so bullet points can touch the image. ​Twenty Seventeen has an additional rule to re-establish the side margin, and something similar might belong in Twenty Sixteen.

If you want to add an image to the left of text, however, I recommend using the Columns block or another way to set them side-by-side that does not involve floating. The text can wrap around the image poorly at various screen/browser widths.

[sabernhardt]

an extreme example of text wrapping around a floating image

[karmatosed]

I don't think this is a bug based on feedback, but happy to be wrong. I am going to remove the patch suggestion and recommend we close. If that isn't correct we can always revisit and get a patch.

[karmatosed]

For now following this through to close. Thank you everyone.