Search code examples
htmlcsssafarimobile-safari

Safari: list item number overlaps a floated span

I maintain a website that has interactive inline footnotes that are inserted as a floated <span> element (with float:left) into the paragraphs just after the footnote number. The idea is that they'd naturally be inserted just after the line in which the footnote's number is placed, but without breaking the line into two lines (hence the float).

This works great most of the time, and you can see a simplified example of what this looks like at this CodePen or in the image below.

The inline footnote as it looks in the above CodePen.

However, I noticed an issue on Safari when using these footnotes inside a numbered list (<ul>/<li>). Take a look at this CodePen where I've inserted the footnotes into a list.

On Chrome and Firefox, this renders properly:

The numbered list with a few footnotes interspersed inside. Everything looks fine.

However, on Safari, a footnote placed at the end of a numbered list item causes the next list item's number to migrate to the previous line:

The same list items as above, except now the number 3 of the third list item has migrated to overlap the footnote inside the number 2 item.

Notice the "3" overlapping the right side of the floated footnote. This also happens with unordered lists (<ul>) where the bullet overlaps the footnote.

Interestingly, if you change the float: left to a float: right, it ends up migrating to the left side of the footnote instead.

The same issue as before, except now instead of overlapping the footnote text, it's positioned just to the left of it.

Any idea what's happening here, and how I can fix it so that it renders consistently between browsers? Is this a Safari bug?

This was tested on both Safari 17.2.1 for Mac and Safari mobile for iOS 17.2.1. Both have the same problem.

The code

In case you don't want to click through to the CodePen:

<article>
  <ol>
    <li>
      <p>This is a list item. It has some text, and that text wraps nicely at the edge of the article as you'd expect.<sup>1</sup>
      <span class="inline-footnote"><sup>1</sup> This is a span, floating in the middle of the list item, representing an inline footnote.</span>
        The footnote below is intended to be between multiple lines of text, and as you can see, it is.</p>
    </li>
    <li>
      <p>This is a second list item. It has some more text.<sup>2</sup>
      <span class="inline-footnote"><sup>2</sup> This is another span, in the middle of the list item, representing a second inline footnote.</span></p>
    </li>
    <li>
      <p>This is a third list item.</p>
    </li>
  </ol>
</article>

.inline-footnote {
  float: left;
  clear: both;
  width: 100%;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: 1em;
  font-size: 90%;
  display: flex;
}

.inline-footnote > sup {
  margin-right: 0.2em; 
}

Some things I've tried

  • Adding ol { overflow: hidden; } or ol { overflow: auto; } (suggested on some other SO questions) doesn't solve the problem, the overlap is still present, it just cuts off the number.

    Basically the same bug, just with a slightly more cut-off "3"

  • Setting ol { list-style-position: inside; } does solve the problem, but at the expense of making wrapped text align to the left side of the number rather than the right side, which I don't want.

    Bug worked around, but at the expense of different text wrapping.

Solution

  • Update: I can no longer reproduce this error on Safari 17.5 for Mac or iOS 17.4.1, so it seems it was a Safari bug that has since been fixed.