平滑iOS中的css过渡而不会导致位置：固定元素出现故障

在iOS设备上测试我的网站时，我意识到一个特殊的过渡，我过去常常改变div的background-color ，看起来非常紧张。 起初我认为这是设备的故障，但是当我稍后在其他一些设备上测试时，结果是相同的。

我做了一些研究，发现这是一个众所周知的问题，我需要做的就是提高动画质量，就是让iOS引入硬件加速。 这个答案告诉我如何：

 -webkit-transform: translate3d(0, 0, 0); 

将此样式添加到div完全平滑过渡。 然而，它有意想不到的副作用使所有具有position: fixed元素position: fixed为停止正常工作，而是表现得好像它们有position: absolute 。

这是我的页面的屏幕截图，略微向下滚动，在没有样式的iPad上查看：

---

这是一个页面的屏幕截图，向下滚动相同的数量，但风格：

---

事实上，导航仍然在那里。 你只需向上滚动即可看到它。 它不再固定到视口。

这是一个演示了操作中的错误的演示：

 html, body { width:100%; height:100%; margin:0; padding:0; transform: translate3d(0, 0, 0); } #nav{ width:100%; height:10%; position:fixed; top:0; left:0; background-color:red; } #content { width:100%; height:500%; } 

即使向下滚动，红色导航也应该可见。 根据您的浏览器，这可能会或可能无法正常工作。 删除有问题的-webkit-transform: translate3d(0, 0, 0); 样式使其在所有浏览器中都能正常工作。

这是我发现的几个线程中的一个，这证实了我怀疑这不是特定于案例的。 具有此样式和position: fixed任何页面position: fixed无法正常工作。

所以我的问题是，如何启用硬件加速，同时具有position: fixed元素position: fixedfunction正常？