Safari: list item number overlaps a floated span

Question 1

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.

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:

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:

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.

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.
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.

Question 2

This seems to a problem which didn’t exist earlier (at least, on IOS 16.7.4 on an iPad for me).

I tried this hack: `li:has(span.inline-footnote) + li { clear: both; }

[not certain the first part is essential] and on IOS 17.2.1 (iPhone) the problem goes away, the 3. of the ordered list is where it should be. And, at least on Edge/Chrome on Windows10, the layout is still OK.

<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>
<style>
  /* Important CSS */
  
  li:has(span.inline-footnote)+li {
    clear: both;
  }
  
  .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;
  }
  /* Unimportant styling CSS */
  
  article {
    max-width: 35em;
    margin: 0 auto;
    line-height: 1.35em;
  }
  
  p {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
  }
  
  sup {
    font-size: 75%;
    line-height: 0.9em;
  }
</style>

The code

Some things I’ve tried

Leave a Comment Cancel reply