javascript - iPad Safari 上的 CSS3 变换缩放问题

Question

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

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

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

注意：链接在页面中是“绝对的”。

请帮忙。

Answer 1

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

看起来好像虽然内容在视觉上被缩放，但它认为锚点仍然在它的原始位置（你看到的灰色框是锚点上的点击效果）。

将其应用于 iframe 文档的正文可以解决问题，同时产生相同的视觉效果。

例如。而不是这个： $(iframeControl).css('-webkit-transform', 'scale(0.5)');

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