Question

我在桌面上的Safari 8 + 9和移动设备上的iOS 8.4及更高版本中有一个非常奇怪的错误，并且无法真正理解它为什么会发生或如何解决它。我可以100％准确地重现它。

重现的步骤：

转到http://demo.phppointofsalestaging.com并点击登录
单击3个水平条以折叠并展开菜单。尝试几次以验证它是否隐藏/显示菜单。
单击“项目”模块。再次单击3个水平条以折叠并展开菜单。尝试几次以验证它是否隐藏/显示菜单。
编辑现有项目。转到底部并点击提交。然后，您将被转移回他们的项目列表。再次单击3个水平条，您将看到文本消失并且似乎中断。

解决此问题的唯一方法是清空缓存。

观看视频了解bug的演练：

https://www.dropbox.com/s/on8v7803alkrz12/odd_safari_behavior_animations.mov?dl=0

我知道如何使用代码修复此问题的唯一方法是删除所有css动画和过渡。

编辑：

我删除了以下内容，现在可行了...我只是想知道原因。

资产/ CSS / style.css中

 .rollover {
   width: auto;
   height: auto;
   position: relative;
   background-color: black;
   display: inline-block;
   text-align: center;
   line-height: 30px;
  transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
---REMOVED--  -webkit-transition: all 0.7s ease;
}
.rollover:after {
  transform: rotateY(0deg);
  /*-webkit-transform: rotateY(-180deg);*/
  -webkit-backface-visibility: hidden;
  /* Chrome, Safari, Opera */
 }

Answer 1

原来有一个css转换正在发生，并且在下一页加载之前没有完成。（链接导致了转换，但也导致浏览器转到下一页）。

这以某种方式破坏了Safari的缓存并导致了所有这些问题。解决方案是删除事务或使用css转换修复逻辑。

关于过渡/动画的奇怪的Safari行为

1 个答案: