CSS3在IPad Safari上的转换缩放问题 [英] CSS3 Transform scaling issue on IPad Safari

问题描述

我在javascript中使用CSS3 Transform：scale（）属性动态缩放iframe。

缩放工作正常，但页面超链接不再可点击。 p>

当我长按链接时，在其他某个地方出现一个灰色矩形。

注意：

解决方案

在将-webkit-transform应用于iframe时，iOS6上的Safari中会出现此问题。它不会在iOS7或iOS上的iOS上出现。

它看起来好像虽然内容可视化缩放，它认为锚点是在它的原始位置静止框中你看到的是对锚的点击效果。）

将它应用到iframe文档的主体解决了问题，同时产生相同的视觉效果。

例如。而不是这样：
$（iframeControl）.css（' - webkit-transform'，'scale（0.5）'）;

这样做：
$（iframeControl.contentDocument.body）.css（' - webkit-transform'，'scale（0.5）'）;

I am dynamically scaling the iframe using CSS3 Transform: scale() property in javascript.

Scaling is working fine but the page hyperlinks are no more clickable.

A grey rectangle appears when i Long press the link, on some other place.

Note: The links are 'absolute' positioned in the page.

Please help.

解决方案

This issue occurs in Safari on iOS6 when applying -webkit-transform to an iframe. It does not occur in iOS7 or Chrome on iOS.

It appears as though although the content is visually scaled, it thinks the anchor is in it's original position still (the grey box you are seeing is the click effect on the anchor).

Applying it to the body of the iframe's document resolves the issue while producing the same visual effect.

eg. Instead of this: $(iframeControl).css('-webkit-transform', 'scale(0.5)');

Do this: $(iframeControl.contentDocument.body).css('-webkit-transform', 'scale(0.5)');

这篇关于CSS3在IPad Safari上的转换缩放问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！