单击Chrome和Safari中的输入字段后出现奇怪的行为

Question

我有一个奇怪的问题。当用户单击输入字段或选择页面内容移动到左侧时。我不知道为什么。这只发生在webkit浏览器中。

此页面使用webkit-transform，可能有问题？

你可以在这里测试一下 http://zapmama.be/home/dev#/ontour

我希望你能帮助我。 非常感谢！

文森特

Answer 1

你有以下错误

Unsafe JavaScript attempt to access frame with URL http://www.zapmama.be/home/dev#/ontour from frame with URL http://www.youtube.com/embed/DSopUVEhG8Y. Domains, protocols and ports must match.
Unsafe JavaScript attempt to access frame with URL http://www.zapmama.be/home/dev#/ontour from frame with URL http://www.youtube.com/embed/mMhSIqE-pBA. Domains, protocols and ports must match.

并且出现行为的原因是此警告消息：

2event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future.

您会在here，here和here

中找到有关此问题解决方案的更多信息

Answer 2

我遇到过这种情况，行为非常相似。即使错误由输入焦点触发，问题也是由完全独立的元素引起的。

然后打开正在发生的页面，复制问题，然后打开检查器。然后浏览页面上的兄弟和其他组件，将它们设置为'display：none'。当问题组件被隐藏时，问题将解决它的问题。该组件是您需要更改的组件。

在我的情况下，我使用'left：50％'作为居中的一部分，并将其改为不同的方法。

恕我直言，你应该避免将left / top与translate3d混合。