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

Posted 2023-02-22

【中文标题】单击 Chrome 和 Safari 中的输入字段后的奇怪行为

【英文标题】：Weird behavior after clicking on input fields in Chrome and Safari

【发布时间】：2012-03-12 17:01:31

【问题描述】：

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

这个页面使用了webkit-transform，可能有问题？

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

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

文森特

【问题讨论】：

要重现，请单击 SELECT，然后单击任何 INPUT。

我现在通过每次发生这种情况时用 JS 更改位置来“掩盖”这种行为。你仍然可以看到它移动了一点。

【参考方案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 中找到有关此问题解决方案的更多信息

【讨论】：

我相信你已经使用 Web Inspector/Chrome 开发者工具来检查这个。这些消息与损坏的布局无关（layerX/layerY 处理 Web Inspector 检查Event 对象的方式）。

【参考方案2】：

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

所以打开它发生的页面，复制问题，然后打开检查器。然后浏览页面上的兄弟和其他组件，将它们设置为“显示：无”。当问题组件被隐藏时，问题将自行修复。该组件是您需要更改的组件。

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

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