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

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

此页面使用webkit转换，可能有问题

你可以在这里测试

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

---

文森特

你有以下错误

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.

weired行为的原因是以下警告信息：

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

---

您将在中找到有关此问题解决方案的更多信息，我遇到过类似的情况。尽管这个bug是由输入焦点触发的，但问题是由一个完全独立的元素引起的

因此，打开发生问题的页面，复制问题，然后打开检查器。然后浏览同级和页面上的其他组件，将它们设置为“display:none”。当问题组件被隐藏时，问题将自行修复。该组件是您需要更改的组件

在我的例子中，我使用“左：50%”作为定心的一部分，并将其更改为不同的方法

---

我想你应该避免将左/顶与translate3d混合。

若要复制，请单击“选择”，然后单击任何输入。现在，每次发生这种情况时，我都会用JS更改位置，从而“掩盖”该行为。你仍然可以看到它移动了一点。我相信你已经使用了Web Inspector/Chrome开发者工具来检查它。这些消息与损坏的布局无关（layerX/layerY消息处理Web Inspector检查

事件

对象的方式）。