IOS Safari: отсечение iframe при использовании transform3d

Question

Люди нашли способ сделать прокрутку div на устройствах ios с использованием преобразований css. У меня есть проблема с iframes в IOS Safari, из-за чего, если я пытаюсь использовать преобразования css3 для прокрутки содержимого в iframe, результирующий контент обрезается до того, что было отображено первым на экране. Это прекрасно работает на устройствах Android и работает на DIVs на IOS, но НЕ в фреймах. Это кажется ошибкой в ​​реализации Safari WebKit. Я попытался увеличить высоту iframe до размера, превышающего содержимое, содержащееся в нем, и обеспечил переполнение в iframe.

Кто-нибудь смог придумать обходной путь? Поскольку мне абсолютно необходим iframe для удаленного контента, моим последним средством будет прокси-контент через серверную страницу и добавление некоторого javascript для выполнения translate3d над тегом тела ребенка: это, похоже, работает.

Изображения - после перевода 3d (уведомление обрезается):

Answer 1

Это заняло какое-то время, но я думаю, что мы наконец-то прибили:

Цитата из http://blog.derraab.com/2012/04/02/avoid-iframe-content-clipping-with-css-transform-on-ios/

Всякий раз, когда вы используете CSS-преобразование с i-кадрами или его родителямивам также необходимо применить базовое CSS-преобразование к тегу body вашего содержимого i-frame.Вот и все.

ОБНОВЛЕНИЕ: убедитесь, что вы начинаете с видимой позиции!

Answer 2

К сожалению, у меня нет ответа для вас, но общее мнение, похоже, заключается в том, чтобы держаться подальше от IFrames в iOS Safari; поддержка просто слишком глючная. Таким образом, я бы поддержал подход использования прокси-сервера на стороне вашего удаленного контента, предполагая, что вы заблокируете его только для доверенного стороннего контента.

Также следует помнить об очевидном ограничении ширины трехмерных преобразованных div-ов в iOS 4.2 Safari - мы обнаружили, что оно обрезано до 122 900 пикселей (эта «функция» отсутствовала в iOS 3.2)