IOS css -webkit-transform: масштаб не компенсирует события касания

У меня есть iframe, который мне нужно для отображения на устройствах iOS. Содержимое iframe не находится под моим контролем, и они не реагируют каким-либо образом (фиксированный 800x600). Поэтому я хотел бы масштабировать iframe вниз, чтобы отобразить его в окне просмотра iOS.

Используя -webkit-transform: scale(0.4), я смог масштабировать его, но теперь события касания все неправильны (например, сенсорный элемент формы не открывает клавиатуру). Если вы касаетесь того, где элемент был до масштабирования, он работает.

Есть ли способ исправить смещение для событий касания?

Ответы

Ответ 1

Выберите scale3d вместо scale. По моему опыту, преобразование элементов, которые необходимо учитывать, было лучше достигнуто, когда элемент был перенесен в ускоренный стек.

Разметка

<iframe src="http://wikipedia.org" width="200" height="200"/>

CSS

iframe {
    -webkit-transform-style: preserve-3d;
    -webkit-transform: scale3d(0.4,0.4,0.4);
}

Fiddle: http://jsfiddle.net/gyHR6/

Подробнее о -webkit-transform-style здесь: https://www.webkit.org/blog-files/3d-transforms/transform-style.html