У меня следующая структура HTML
<body>
<div id="graphic">
<div id="wrap">
<svg width="8000px" height="32000px">
....
</svg>
</div>
</div>
И к нему применили следующий CSS:
#graphic {
width: 768px;
height: 1004px;
overflow: hidden;
}
#wrap {
width: 768px;
height: 1004px;
-webkit-transform: scale(1) translate3d(0, 0, 0);
}
Используя анимацию CSS3, я хочу панорамировать / масштабировать очень большую графику svg. Он работает ... вроде как. Я обнаружил на iPad проблему, заключающуюся в том, что при установке значения y для translate3d ниже ~ 16500 пикселей графика больше не отображается (в Safari или Chrome это работает совершенно нормально). Я подумал, что может быть ограничение на высоту / ширину рендеринга SVG в мобильном Safari, но удаление overflow: hidden из контейнера #graphic позволяет мне прокручивать полностью вниз и все, что отображается правильно.
Кто-нибудь слышал или испытывал подобные ограничения / Есть ли какое-то значение CSS, которое я должен установить, чтобы все это работало? Любая помощь горячо приветствуется.
