Почему текст внутри foreignObject не отображается в браузере Safari?

Question

[Капитан Какао]

Всем привет, есть анимация графика - демо
Всё работает хорошо, но если открыть это дело в мобильном Safari, то анимация работает частично.
Линия и точки на ней появляются, а вот название месяцев нет.
Проблема только в Safari. Кто знает как решить проблему и в чём вообще она заключается?

Ссылка для просмотра результата во весь экран на телефоне - jsfiddle.net/eg8ps619/5/embedded/result/dark#Result

Answer 1

[Пашенька]

Привет, я перепробовал много чего: нэймспейсы для div'ов аттрибуты x, y, width, heigh для форейнОбджект, две мобильных версии сафари и т.д., но только указав position: fixed для месяцев удалось их проявить. При дебаге видно, что месяцы находятся на своих местах, просто их не видно. На решение это, конечно, не претендует. Я бы на вашем месте сделал это без использования svg вообще. Или пробуйте без foreignObject, используя svg'шные элементы вроде text. Сафари безнадёжен)

Comments

[Капитан Какао]

В не SVG делать не вариант, так как эта штука на адаптивном сайте, и при сужении области анимация пропорционально уменьшается (как картинка) и текст так же.
А если сделать текст за областью SVG он уже себя так не будет вести, придётся что-то на JS дополнительно мудрить, а это гемор...)

За position: fixed спасибо, теперь конечно текст видно, но он перестал масштабироватся в зависимости от размера SVG. То есть по сути текст ведёт себя так, как будто он за областью SVG(

[Пашенька]

Juliya Ya, ну он и есть вне потока, так как это фиксд, потому я и написал, что это не выход. Пробовали без форейнОбджект, обходясь свг элементами, без дивов то есть? В сафари есть проблемы с этим тегом.

[Капитан Какао]

like-a-boss, не думаю что без форейнОбджект будет везде нормально работать.

[Пашенька]

Juliya Ya, не просто без форейнОбджект, а заменив <div>'ы на <text>, например