Javascript webkit上位置固定模式窗口上的CSS转换

我喜欢这个设计，我已经在我自己的几个网站上使用了这个设计，多年来一直没有任何问题。然而，我注意到，最近webkit浏览器导致转换效果闪烁，并真正破坏了Chrome、Edge等的效果。在谷歌搜索之后，似乎闪烁是由webkit浏览器在硬件加速模式中来回切换引起的，可以通过添加CSS属性

-webkit transform:translate3d来修复（0,0,0）；

到正在转换的元素

但是，我已经尝试将此属性应用于我可以找到的每个转换代码块（

.cd modal

，

.modal content

，

.cd transition layer

），除非我使用

HTML{-webkit transform:translate3d（0,0,0）；}将其应用于文档中的所有HTML，否则它似乎不起作用

。但是，这会导致其他问题，即将所有

位置：固定；

元素（包括全屏模式窗口本身）敲到一个位置。结果是，全屏菜单不再是全屏菜单，或滚动

主体的长度，或与过渡层位于不同的帧中，等等

我已经能够在各种元素上使用
position:sticky；
来解决这个问题，但这是一个真正的黑客行为，并导致了一些其他问题。是否有其他方法，或者特定的哪些元素需要在3d变换模式下初始化？非常感谢您的帮助。以下是我的（如果按预期工作，则在新窗口中全屏启动以查看故障）.
进一步调查后，问题肯定是webkit浏览器上的
transitionBackground
的相对宽度和高度，我认为硬件加速技巧可能只是巧合。我发现当我在
setLayerDimensions（）中操作
layerHeight
时
使用
layerHeight=2*Math.round（layerHeight/2）；
四舍五入到最接近的偶数像素，我可以显著减少效果中断的频率，但不能完全消除中断。感谢理解这一点或找到完美的相对尺寸的任何帮助。