javascript - 当使用 iPhone/iPod touch 浏览我的网站时，单击菜单栏元素将导致它们 "twitching"。为什么？

Question

我想不通这是为什么。在我测试过的 Android 设备上没有出现该问题，但在 iPhone 或 iPod touch 上，单击菜单栏会导致它以各种尺寸进出。

http://christianselig.com

Answer 1

您在 .menu-bar 元素上设置了过渡。我怀疑发生的事情是它正在被浏览器调整大小，并正在过渡到新的大小，而不是简单地捕捉。

只需替换您的过渡:

transition: 0.6 ease

使用一个限定您要转换的属性的范围:

transition: box-shadow 0.6 ease

那应该修复它，但我很难测试，因为问题发生在页面加载时。

编辑:我在正确的轨道上，错误的位置。确定 anchor 上的过渡范围就可以做到。参见 http://coffeepowered.net/projects/Christian%20Selig.htm例如。

.menu-bar a {
    color: #555;
    padding: 5px 8px 7px 8px;
    text-decoration: none;
    -webkit-transition: -webkit-box-shadow 0.1s ease;
    transition: box-shadow 0.1s ease;
}