简体繁体 English

非常奇怪的iframe事件行为

[英]Very strange iframe event behavior

原文 2012-11-21 03:34:05 6 1 javascript/ jquery/ html/ google-chrome/ iframe

This question has me completely stumped. 这个问题让我完全糊涂了。 Since it's in a browser extension, I can't post my code. 由于它是在浏览器扩展中，我无法发布我的代码。

The issue is apparently that mouse events inside the iframe (hovering over a link, over text, selecting...) are off by about 200px, this includes right clicks as shown in this screenshot: 问题显然是iframe中的鼠标事件（悬停在链接上，文本上方，选择...）大约200px，这包括右键点击，如此屏幕截图所示：

红点是实际的鼠标点击位置

The red dot is the actual mouseclick location. 红点是实际的鼠标点击位置。 Again, since this is an extension (I'm actually doing the JS part in Tampermonkey, it's easier) I can't try it out in other browsers so it might just be chrome. 再次，因为这是一个扩展（我实际上在Tampermonkey中做了JS部分，它更容易）我不能在其他浏览器中尝试它，所以它可能只是chrome。

The iframe is to contain third-party dynamically loaded content so I can't use a div or other element. iframe包含第三方动态加载的内容，因此我不能使用div或其他元素。 It's also reused and is dynamically inserted on load. 它也被重用，并在加载时动态插入。

This also doesn't happen the first time content is inserted instead it takes a few "cycles" to appear. 这也不会在第一次插入内容时发生，而是需要几个“周期”才能显示。

Any ideas? 有任何想法吗？

1 个解决方案

This was apparently a Chrome bug, albeit a strange one. 这显然是一个Chrome bug，虽然很奇怪。 I started having other issues so I reinstalled Chrome and upgraded to Windows 8 (I was planning to anyway), the bug seems to have gone away. 我开始遇到其他问题所以我重新安装了Chrome并升级到Windows 8（无论如何我打算计划），这个bug似乎已经消失了。

EDIT: It just came back, it turns out that the issue was that I was using -webkit-transform: scale() to show and hide the frame with a transition, removing this fixes the issue. 编辑：它刚刚回来，事实证明问题是我使用-webkit-transform: scale()来显示和隐藏带有转换的帧，删除它可以解决问题。

So, to all those with iframe mouse event issues in Chrome/WebKit: check all of your transforms and any CSS3 effects, try removing them one at a time. 因此，对于Chrome / WebKit中存在iframe鼠标事件问题的所有人：检查所有变换和任何CSS3效果，请尝试一次删除一个。