【问题标题】:Weird behavior after clicking on input fields in Chrome and Safari单击 Chrome 和 Safari 中的输入字段后的奇怪行为
【发布时间】:2012-03-12 17:01:31
【问题描述】:

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

这个页面使用了webkit-transform,可能有问题?

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

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

文森特

【问题讨论】:

  • 要重现,请单击 SELECT,然后单击任何 INPUT。
  • 我现在通过每次发生这种情况时用 JS 更改位置来“掩盖”这种行为。你仍然可以看到它移动了一点。

标签: html input webkit


【解决方案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.

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

【讨论】:

  • 我相信你已经使用 Web Inspector/Chrome 开发者工具来检查这个。这些消息与损坏的布局无关(layerX/layerY 处理 Web Inspector 检查Event 对象的方式)。
【解决方案2】:

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

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

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

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多