iPad Safari 上的 CSS3 变换缩放问题

Question

我正在使用CSS3 Transform：javascript中的scale()属性动态缩放iframe。

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

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

注意：链接在页面中“绝对”定位。

请帮忙。

Answer 1

将

-webkit-transform

应用于

iframe

时，iOS6 上的 Safari 中会出现此问题。在 iOS7 或 iOS 上的 Chrome 中不会出现这种情况。

虽然内容在视觉上进行了缩放，但它认为锚点仍处于原始位置（您看到的灰色框是锚点上的点击效果）。

将其应用到

iframe

的文档正文可以解决该问题，同时产生相同的视觉效果。

EG而不是这个：

$(iframeControl).css('-webkit-transform', 'scale(0.5)');

这样做：

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