Question

网站加载时我有一个加载页面。它在Chrome中工作正常，但我需要在Safari上修复它，因为它无法正常工作。这是我的代码：

＆＃13;

.se-pre-con {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: #fff;
}

.loading {
  top: 30%;
  right: 45%;
  position: fixed;
  -webkit-animation: spinHorizontal 4s linear infinite;
  -moz-animation: spinHorizontal 4s linear infinite;
  animation: spinHorizontal 4s linear infinite;
}

@keyframes spinHorizontal {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

＆＃13;

<div class="se-pre-con">
  <div class="loading">

    <img src="http://www.pngmart.com/files/4/Circle-PNG-Picture-279x279.png">
  </div>

＆＃13;

Answer 1

它似乎与position: fixed元素上的.se-pre-con有关。尝试使用absolute定位或以其他方式定位。

.se-pre-con {
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: #ffffff;
}

.loading {
  width: 279px;
  height: 279px;
  top: 30%;
  right: 45%;
  position: fixed;
  -webkit-backface-visibility: visible;
  -webkit-animation: spinHorizontal 2s linear infinite;
  -moz-animation: spinHorizontal 2s linear infinite;
  animation: spinHorizontal 2s linear infinite;
  background-color: transparent;
}

@keyframes spinHorizontal {
  0% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
}

<div class="se-pre-con">
  <div class="loading">

    <img src="http://www.pngmart.com/files/4/Circle-PNG-Picture-279x279.png" />
  </div>
</div>

过渡：在Safari中旋转不起作用

1 个答案: