Safari: номер элемента списка перекрывает плавающий диапазон ⇐ CSS

[Anonymous]

У меня есть веб-сайт, на котором есть интерактивные встроенные сноски, которые вставляются в виде плавающего элемента (с float:left) в абзацы сразу после номера сноски. Идея состоит в том, что они естественным образом вставляются сразу после строки, в которой находится номер сноски, но без разбиения строки на две строки (отсюда и плавающее число).
В большинстве случаев это отлично работает, и вы можете увидеть упрощенный пример того, как это выглядит, в этом CodePen или на изображении ниже.

Однако я заметил проблему в Safari при использовании этих сносок внутри нумерованного списка (

Код: Выделить всё

[list]/[*]). Взгляните на этот CodePen, где я вставил сноски в список.
В Chrome и Firefox это отображается правильно:
[img]https://i.sstatic.net/1IZS1.png[/img]

Однако в Safari сноска, помещенная в конец нумерованного элемента списка, приводит к созданию следующего списка. номер элемента для переноса на предыдущую строку:
[img]https://i.sstatic.net/HXWCm.png[/img]

Обратите внимание на цифру «3», перекрывающую правую часть плавающей сноски. Это также происходит с неупорядоченными списками (

), где маркер перекрывает сноску.
Интересно, что если вы измените float: left на float: right, он в конечном итоге переместится вместо этого в левую часть сноски.


Есть идеи, что здесь происходит и как я могу это исправить, чтобы оно отображалось последовательно в разных браузерах? Это ошибка Safari?
Это было протестировано как на Safari 17.2.1 для Mac, так и на мобильном Safari для iOS 17.2.1. У обоих одна и та же проблема.
Код
Если вы не хотите переходить к CodePen:

Код: Выделить всё

[list]

This is a list item. It has some text, and that text wraps nicely at the edge of the article as you'd expect.1
1 This is a span, floating in the middle of the list item, representing an inline footnote.
The footnote below is intended to be between multiple lines of text, and as you can see, it is.

[*]
This is a second list item. It has some more text.2
2 This is another span, in the middle of the list item, representing a second inline footnote.

[*]
This is a third list item.

[/list]

Код: Выделить всё

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

Некоторые вещи, которые я пробовал

[*]Добавление ol { overflow: скрыто; или ol { overflow: auto; (предлагается в некоторых других вопросах SO) не решает проблему, перекрытие все еще присутствует, оно просто отсекает число.



[*]Настройка ol { list-style-position: Inside; решает проблему, но за счет выравнивания переносимого текста по левой стороне числа, а не по правой стороне, чего мне не нужно.



[/list]

Подробнее здесь: https://stackoverflow.com/questions/778 ... oated-span