В документе SVG с 3 элементами: 2 посторонними объектами и линией (в таком порядке), я ожидаю, что линия появится поверх посторонних объектов как SVG с использованием алгоритма рисователя (а посторонние объекты создают новую стопку context).
Однако, если внешний объект содержит переполнение div в стиле overflow-y:auto, в Chrome 81 и Safari (он работает с FF), это не так: строка появляется ниже внешнего объекта , Проблема исчезнет, если вы измените содержимое / размер div, чтобы он не переполнялся.
Переполняющий элемент div в верхней части строки, несмотря на то, что он раньше отображался в документе SVG
Источник HTML, воспроизводящий проблему
Я что-то не так понимаю или это ошибка webkit / blink? Я видел несколько ошибок, связанных с foreignObject и порядком размещения, но ничего подобного этому не было.
(Chrome 81.0.4044.122, Safari 13.1, macOS 10.15.4.)