css - 移动设备上的全屏菜单执行缓慢

Question

这是一个奇怪的问题，花了几天的时间在谷歌上搜索了许多“修复程序”，但我还没有找到解决这个奇怪问题的方法。开始。

我在屏幕顶部有一个固定位置的菜单按钮，当单击它时，只允许另一个固定位置的全屏菜单从屏幕顶部向下滑动。受此站点解决方案的启发:

http://gardenestudio.com.br/

这里是覆盖菜单的 css 样式，其中包含一个子 ul 作为测试。

    .overlay{
  width: auto;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgb(59, 69, 97);
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  transform: translate(0,-100%);
  -webkit-transform: translate(0,-100%);
  display: inline-block;
  -webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
  backface-visibility: hidden;
}

应用了以下“SlideIn”和“SlideOut”关键帧

@-webkit-keyframes overlayAnimateIn {
  0% {
  transform: translate(0,-100%);
  -webkit-transform: translate(0,-100%);
  }

  100% {
  transform: translate(0,0%);
  -webkit-transform: translate(0,0%);
  }
}

@-webkit-keyframes overlayAnimateOut {
  0% {
  transform: translate(0, 0%);
  -webkit-transform: translate(0,0%);
  }

  100% {
  transform: translate(0,-100%);
  -webkit-transform: translate(0,-100%);
  }
}

但是，我遇到的问题是在桌面上动画的性能很好。但是在移动设备上......来自 Sony Xperia Z2 Compact( Vanilla 安装)等......动画的表现很糟糕......在前 10 秒然后在那个时间间隔之后，动画像丝绸一样流畅。注意:gardenstudio 解决方案始终流畅。

我对我的 CSS 和 HTML 进行了多次优化和缩减，以试图找出导致此问题的原因。

看着http://gardenestudio.com.br/例如，我已将我的样式表减少到大约 800 行(正确呈现页面所需的最少数量)并且 HTML 标记为 460 行(少于 gardenstudio)

如果我将 HTML(保留 css)完全减少到几乎没有，动画就会很流畅。如果我减少 css(保留标记)动画会很流畅..

有些东西告诉我，我的标记和/或 css 中的某些东西在计算上很昂贵并且会导致瓶颈。

任何人都可以提出任何帮助找到瓶颈的建议，或者如果有任何其他建议的解决方案，那就太好了:)

Answer 1

经过 2 天半的减少、删除和优化，我现在找到了罪魁祸首。

我们有一个主体内容包装器，它应用了 Box Shadow。

删除这个 Box 阴影解决了这个问题，动画现在变得流畅了。

我会继续缓慢地重新添加所有已删除的样式等，如果我发现这会导致如此重大的性能下降，我会向您报告。