list item background image repeated on column display

By design Issue #10669583

Details

Author
Joery L.
Created
Jan 26, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
Found in build #
38.14393
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

https://jsfiddle.net/9026j37u/1/

list element background image is repeated on second column (see attachment edge1.png)

<ul>
<li>this is the first list item, which has a lot more text than the second list item so it is displayed on multiple lines</li>
<li>this is the second list item</li>
</ul>

If the list itself is displayed in 2 columns: ul { columns: 2; }
and the list items have a background image and bottom padding:
ul li { background: url(some-svg-image-here.svg) no-repeat left top, padding-bottom: 30px; }
then the background image of the first list element is displayed above the second column above the second list element.

This does not happen all the time, but only seem to happen under very strict conditions:

  • if there are exactly 2 list items
  • if the first list item is longer than the second list item (the text is displayed on more lines than the text of the second item)
  • if the list elements have a bottom padding (otherwise the repeated background of the first element overlaps the background of the second giving the impression that there is no problem)

Attachments

Comments and activity

  • Microsoft Edge Team

    Changed Steps to Reproduce

    Changed Status to “By design”

  •  Added a fiddle of the issue based on the OP’s repro steps. I took it a little further and only applied the background image to the first li only via the first-child pseudo selector to highlight the issue described the OP. That said, I’m resolving this as by design as we create the separate fragments taking into account the padding box as well, we don’t only fragment on the list items which seems to be what is the expected results here. As such, you’re getting the remaining padding from the padding box which will contain the background image. This becomes more obvious if you add in a border which shows that the li has wrapped due to the auto setting of the columns which takes into account not only the content box but also the padding, border and margin boxes when fragmenting as seen in this updated fiddle: https://jsfiddle.net/9026j37u/2/

You need to sign in to your Microsoft account to add a comment.

Sign in