CSS 在 Safari 中调整 Window 大小时变换原点会奇怪地重新定位？

Question

虽然它在 Firefox 中似乎工作正常，但我似乎无法弄清楚为什么下面的背景图像 class，(.sitebg)，在浏览器 window 尺寸在 Safari 网络浏览器中调整。调整 window 时 transform-origin 会奇怪地跳动，但我还不知道是什么原因导致的...

这是某种错误，还是我需要实施一些东西以实现更好的跨浏览器兼容性？

请参阅下面的代码片段以供进一步参考。

body,
html {
  height: 100%;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-text-size-adjust: 100%;
}

body {
  background: blue;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}


/* -- Site Background -- */

.sitebg {
  background: url(http://maxpixel.freegreatpicture.com/static/photo/1x/Seamless-Repeating-Tiling-Tile-able-Tileable-1889447.jpg);
  background-size: 720px 720px;
  background-repeat: repeat;
  background-position: center;
  width: 1000%;
  height: 1000%;
  position: fixed;
  top: 50%;
  left: 50%;
}

@-moz-keyframes bg-rotate {
  0% {
    -moz-transform: rotate(0deg) translate(-50%, -50%);
    -moz-transform-origin: top left;
  }
  100% {
    -moz-transform: rotate(360deg) translate(-50%, -50%);
    -moz-transform-origin: top left;
  }
}

@-webkit-keyframes bg-rotate {
  0% {
    -webkit-transform: rotate(0deg) translate(-50%, -50%);
    -webkit-transform-origin: top left;
  }
  100% {
    -webkit-transform: rotate(360deg) translate(-50%, -50%);
    -webkit-transform-origin: top left;
  }
}

@keyframes bg-rotate {
  0% {
    transform: rotate(0deg) translate(-50%, -50%);
    transform-origin: top left;
  }
  100% {
    transform: rotate(360deg) translate(-50%, -50%);
    transform-origin: top left;
  }
}


/* -- Stack Ordering -- */

.sitebg {
  z-index: -1;
}

body {
  z-index: -2;
}


/* -- Media Queries -- */

@media only screen and (min-width:2000px) {
  .sitebg {
    -webkit-animation: 800s bg-rotate infinite linear;
    -moz-animation: 800s bg-rotate infinite linear;
    -o-animation: 800s bg-rotate infinite linear;
    -ms-animation: 800s bg-rotate infinite linear;
    animation: 800s bg-rotate infinite linear;
  }
}

@media only screen and (max-width: 2000px) and (min-width: 1500px) {
  .sitebg {
    -webkit-animation: 700s bg-rotate infinite linear;
    -moz-animation: 700s bg-rotate infinite linear;
    -o-animation: 700s bg-rotate infinite linear;
    -ms-animation: 700s bg-rotate infinite linear;
    animation: 700s bg-rotate infinite linear;
  }
}

@media only screen and (max-width: 1500px) and (min-width: 1000px) {
  .sitebg {
    -webkit-animation: 600s bg-rotate infinite linear;
    -moz-animation: 600s bg-rotate infinite linear;
    -o-animation: 600s bg-rotate infinite linear;
    -ms-animation: 600s bg-rotate infinite linear;
    animation: 600s bg-rotate infinite linear;
  }
}

@media only screen and (max-width: 1000px) and (min-width: 600px) {
  .sitebg {
    -webkit-animation: 500s bg-rotate infinite linear;
    -moz-animation: 500s bg-rotate infinite linear;
    -o-animation: 500s bg-rotate infinite linear;
    -ms-animation: 500s bg-rotate infinite linear;
    animation: 500s bg-rotate infinite linear;
  }
}

@media only screen and (max-width:600px) {
  .sitebg {
    -webkit-animation: 500s bg-rotate infinite linear;
    -moz-animation: 500s bg-rotate infinite linear;
    -o-animation: 500s bg-rotate infinite linear;
    -ms-animation: 500s bg-rotate infinite linear;
    animation: 500s bg-rotate infinite linear;
  }
}

<div class="sitebg"></div>

Answer 1

因此，似乎使用 width 和 height 的百分比值导致了故障的发生。虽然我不确定这是否是迄今为止最好的解决方案，但这对我有用：

body,
html {
  height: 100%;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-text-size-adjust: 100%;
}

body {
  background: blue;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}


/* -- Site Background -- */

.sitebg {
  background: url(http://maxpixel.freegreatpicture.com/static/photo/1x/Seamless-Repeating-Tiling-Tile-able-Tileable-1889447.jpg);
  background-size: 720px 720px;
  background-repeat: repeat;
  background-position: center;
  width: 6788px;
  height: 6788px;
  position: fixed;
  top: 50%;
  left: 50%;
}

@-moz-keyframes bg-rotate {
  0% {
    -moz-transform: rotate(0deg) translate(-50%, -50%);
    -moz-transform-origin: top left;
  }
  100% {
    -moz-transform: rotate(360deg) translate(-50%, -50%);
    -moz-transform-origin: top left;
  }
}

@-webkit-keyframes bg-rotate {
  0% {
    -webkit-transform: rotate(0deg) translate(-50%, -50%);
    -webkit-transform-origin: top left;
  }
  100% {
    -webkit-transform: rotate(360deg) translate(-50%, -50%);
    -webkit-transform-origin: top left;
  }
}

@keyframes bg-rotate {
  0% {
    transform: rotate(0deg) translate(-50%, -50%);
    transform-origin: top left;
  }
  100% {
    transform: rotate(360deg) translate(-50%, -50%);
    transform-origin: top left;
  }
}


/* -- Stack Ordering -- */

.sitebg {
  z-index: -1;
}

body {
  z-index: -2;
}


/* -- Media Queries -- */

@media only screen and (min-width:2000px) {
  .sitebg {
    -webkit-animation: 800s bg-rotate infinite linear;
    -moz-animation: 800s bg-rotate infinite linear;
    -o-animation: 800s bg-rotate infinite linear;
    -ms-animation: 800s bg-rotate infinite linear;
    animation: 800s bg-rotate infinite linear;
  }
}

@media only screen and (max-width: 2000px) and (min-width: 1500px) {
  .sitebg {
    -webkit-animation: 700s bg-rotate infinite linear;
    -moz-animation: 700s bg-rotate infinite linear;
    -o-animation: 700s bg-rotate infinite linear;
    -ms-animation: 700s bg-rotate infinite linear;
    animation: 700s bg-rotate infinite linear;
  }
}

@media only screen and (max-width: 1500px) and (min-width: 1000px) {
  .sitebg {
    -webkit-animation: 600s bg-rotate infinite linear;
    -moz-animation: 600s bg-rotate infinite linear;
    -o-animation: 600s bg-rotate infinite linear;
    -ms-animation: 600s bg-rotate infinite linear;
    animation: 600s bg-rotate infinite linear;
  }
}

@media only screen and (max-width: 1000px) and (min-width: 600px) {
  .sitebg {
    -webkit-animation: 500s bg-rotate infinite linear;
    -moz-animation: 500s bg-rotate infinite linear;
    -o-animation: 500s bg-rotate infinite linear;
    -ms-animation: 500s bg-rotate infinite linear;
    animation: 500s bg-rotate infinite linear;
  }
}

@media only screen and (max-width:600px) {
  .sitebg {
    -webkit-animation: 500s bg-rotate infinite linear;
    -moz-animation: 500s bg-rotate infinite linear;
    -o-animation: 500s bg-rotate infinite linear;
    -ms-animation: 500s bg-rotate infinite linear;
    animation: 500s bg-rotate infinite linear;
  }
}

<div class="sitebg"></div>

CSS 在 Safari 中调整 Window 大小时变换原点会奇怪地重新定位？

CSS Transform Origin Repositions Oddly When Window Size is Adjusted in Safari?

css

safari

css-transforms

css-animations