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%);
  }
}

然而，我遇到的问题是在桌面上动画的表现很好。但是在移动设备上......来自索尼Xperia Z2 Compact（香草安装）等。动画的表现很可怕..前10秒再经过那个时间间隔后，动画就像丝绸一样光滑。注意：gardenstudio解决方案始终流畅。

我已经经历了一些优化和减少我的CSS和HTML，试图找到导致此问题的原因。

查看http://gardenestudio.com.br/示例，我将样式表减少到大约800行（正确呈现页面所需的最小值），HTML标记为460行（少于gardenstudio）

如果我将HTML（离开css）完全缩减为几乎没有，那么动画就会很流畅。如果我减少css（离开标记）动画是平滑的..

有些东西告诉我，我的标记和/或css中有一些东西在计算上很昂贵而且会造成瓶颈。

任何人都可以建议任何帮助找到瓶颈，或者是否有任何其他建议的解决方案，这将是伟大的：）

Answer 1

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

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

删除此Box阴影解决了问题，动画现在变得平滑。

我会继续慢慢地重新添加所有已移除的样式等，如果我发现为什么会导致如此重大的性能影响，我会报告回来。

在移动

1 个答案: