在Safari中调整窗口大小时，奇怪的CSS转换原点重新定位？

时间：2018-02-18 21:24:55

标签： css css3 safari css-animations css-transforms

虽然它似乎在Firefox中运行良好，但我似乎无法弄清楚为什么下面的背景图像类（.sitebg）在Safari网页中调整浏览器窗口大小时会不正确地重新定位浏览器。调整窗口时transform-origin奇怪地跳了起来，但我还不知道导致这种情况发生的原因......

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

请参阅下面的代码段以获取进一步的参考。

＆＃13;
＆＃13; 
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;
  }
}
＆＃13; 
<div class="sitebg"></div>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

因此，看起来使用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>

相关问题
最新问题