javascript - 使用 iPhone/iPod touch 浏览我的网站时，单击菜单栏项目会导致它们“抽搐”。为什么？

Question

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

http://christianselig.com

Answer 1

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

只需替换您的过渡：

transition: 0.6 ease

使用一个范围您要转换的属性：

transition: box-shadow 0.6 ease

那应该可以解决它，但是我很难测试，因为问题发生在页面加载时。

编辑：我在正确的轨道上，错误的位置。确定锚点上的过渡就可以了。例如，请参阅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;
}