网页内容在 Safari 上显示不正确

Question

创建快速网站后，我注意到 iPhone 和 Mac 上的 Safari 中的图像要么不显示，要么格式不正确。例如，我预计assets/images/showzaunder @keyframes animateinindex.css会以设备宽度的 65% 显示，这适用于 Windows 10 的 Chrome，但在 Safari 上，它实际上看起来膨胀到超过 100%。我想我正在寻找我可能错过的任何 Safari 依赖项，我不习惯 Web 开发的差异。body, html {    height: 100%;    margin: 0;}.container{    position: absolute;    left: 0;    top: 0;    width: 100%;    height: 100vh;    animation: animate 16s ease-in-out infinite;    background-size: cover;}.outer{    position: absolute;    left: 0;    top: 0;    width: 100%;    height: 100vh;    background: rgba(0,0,0,0.15)}@keyframes animate{        0%,100%{        background-image: url("https://raw.githubusercontent.com/showzadomain/showzatheband.github.io/master/assets/images/showza.png"), url("https://github.com/showzadomain/showzatheband.github.io/blob/master/assets/images/bg_1.JPG?raw=true");        height: 100%;                -webkit-appearance: textfield;        background-position: center;        background-repeat: no-repeat;        background-size: 65%, cover;    }    33%{        background-image: url("https://raw.githubusercontent.com/showzadomain/showzatheband.github.io/master/assets/images/showza.png"), url("https://github.com/showzadomain/showzatheband.github.io/blob/master/assets/images/bg_2.JPG?raw=true");    }    66%{        background-image: url("https://raw.githubusercontent.com/showzadomain/showzatheband.github.io/master/assets/images/showza.png"), url("https://github.com/showzadomain/showzatheband.github.io/blob/master/assets/images/bg_3.jpg?raw=trueg");    }}.image {    border-radius: 100px;}.itemDiv {    height: 45px;}.item {    color: white;    font-family: Helvetica;    font-weight: bold;    font-style: normal;    font-size: 30px;}.menuItem {    color: white;    font-family: Helvetica;    font-weight: bold;    font-style: normal;    font-size: 40px;}.topnav {    overflow: hidden;    background-color: transparent;}

Answer 1

因此，核心问题似乎是尝试使用两个背景图像制作动画。我没有发现“Safari”+“多个图像”的任何已知错误，但正如我们所看到的，它没有按预期工作。如果你从该动画中删除徽标，它在 Safari 中可以工作，但这不是我所说的“可接受”。

就像这样：

66% {

  background-image: url("https://github.com/showzadomain/showzatheband.github.io/blob/master/assets/images/bg_3.jpg?raw=trueg");

}

其他一些提示：

1. 仅对发生变化的内容进行动画处理，并将共享内容移至主 css 选择器。您在 0 和 100% 中添加的值仅适用于那里，但我认为您希望它在所有州之间共享。所以最好在.container

:(

.container{

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100vh;

    animation: animate 16s ease-in-out infinite;

    background-size: cover;

}

@keyframes animate{

    0%,100%{

        background-image: url("https://raw.githubusercontent.com/showzadomain/showzatheband.github.io/master/assets/images/showza.png"), url("https://github.com/showzadomain/showzatheband.github.io/blob/master/assets/images/bg_1.JPG?raw=true");

        height: 100%;

        -webkit-appearance: textfield;

        background-position: center;

        background-repeat: no-repeat;

        background-size: 65%, cover;

    }

    33%{

        background-image: url("https://raw.githubusercontent.com/showzadomain/showzatheband.github.io/master/assets/images/showza.png"), url("https://github.com/showzadomain/showzatheband.github.io/blob/master/assets/images/bg_2.JPG?raw=true");

    }

    66%{

        background-image: url("https://raw.githubusercontent.com/showzadomain/showzatheband.github.io/master/assets/images/showza.png"), url("https://github.com/showzadomain/showzatheband.github.io/blob/master/assets/images/bg_3.jpg?raw=trueg");

    }

}

:)

.container{

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    animation: animate 16s ease-in-out infinite;

    background-size: cover;

    height: 100%;

    -webkit-appearance: textfield;

    background-position: center;

    background-repeat: no-repeat;

    background-size: 65%, cover;

}

@keyframes animate{

    0%,100%{

        background-image: url("https://raw.githubusercontent.com/showzadomain/showzatheband.github.io/master/assets/images/showza.png"), url("https://github.com/showzadomain/showzatheband.github.io/blob/master/assets/images/bg_1.JPG?raw=true");

    }

    33%{

        background-image: url("https://raw.githubusercontent.com/showzadomain/showzatheband.github.io/master/assets/images/showza.png"), url("https://github.com/showzadomain/showzatheband.github.io/blob/master/assets/images/bg_2.JPG?raw=true");

    }

    66%{

        background-image: url("https://raw.githubusercontent.com/showzadomain/showzatheband.github.io/master/assets/images/showza.png"), url("https://github.com/showzadomain/showzatheband.github.io/blob/master/assets/images/bg_3.jpg?raw=trueg");

    }

}

div当只涉及文本时，锚点应该包裹s。这是我的偏见，但你的 HTML 有这种倾向。

:(

<a href="#news">

  <div class="item">

    live dates

  </div>

</a>

:)

<a href="#news" title="Some helpful title" class="item">live dates</a>

或者

<a href="#news" title="Some helpful title"><span class="item">live dates</span></a>

另外，通过某种形式的自动前缀器运行 CSS，希望获得最好的跨浏览器支持。我是以下网站的粉丝： https: //autoprefixer.github.io/

我按照我的方式重建了它，这涉及到在某种程度上改变一切。希望它对您的道路有所帮助。这完全是有偏见的，但我认为它实现了你的目标，你可以以此为基础。

// This just creates a timer to change the data-background of the body

window.setInterval(function(){

  var currentBackground = document.body.getAttribute("data-background") * 1,

      nextBackground = currentBackground + 1;

  if (currentBackground >= 3) {

    nextBackground = 1;

  }

  document.body.setAttribute("data-background", nextBackground);

}, 5000);

// menu controls

var toggleMenu = document.querySelector(".topnav");

var toggleMenuButton = toggleMenu.querySelector(" button");

var toggleMenuState = function (evt) {

  evt.preventDefault();

  var currentState = toggleMenu.getAttribute("data-state");

  if (currentState === "closed") {

    toggleMenu.setAttribute("data-state", "open");

  } else {

    toggleMenu.setAttribute("data-state", "closed");

  }

};

toggleMenuButton.addEventListener("click", toggleMenuState);

/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.26, autoprefixer: v9.7.3) */

body {

    height: 100vh;

    margin: 0;

}

body {

  font-family: Helvetica;

  color: white;

  font-weight: bold;

  font-style: normal;

  font-size: 30px;

}

.topnav {

  position: fixed;

  top: 0;

  left: 0;

  list-style: none;

  z-index: 3;

  margin: 0;

  padding: 0;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: horizontal;

  -webkit-box-direction: normal;

      -ms-flex-direction: row;

          flex-direction: row;

}

.topnav .logo img {

  border-radius: 100px;

}

.topnav button {

  display: none;

}

.topnav ul {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: horizontal;

  -webkit-box-direction: normal;

      -ms-flex-direction: row;

          flex-direction: row;

}

.topnav li {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

}

.topnav a,

.topnav button {

  text-align: center;

  padding: 14px 16px;

  text-decoration: none;

  

  color: white;

  font-weight: bold;

  font-style: normal;

  font-size: 40px;

}

.topnav button {

  border: inherit;

  background: inherit;

  cursor:pointer;

}

.topnav button:before {

  content: "» ";

  margin-right: 0.25em;

}

.topnav[data-state="open"] button:before {

  content: "x ";

}

.topnav a:hover,

.topnav button:hover {

    background-color: black;

    border-radius: 100px;

}

.topnav a.active {

    background-color: #4CAF50;

    color: white;

}

.gallery {

  position: fixed;

  top: 0;

  left: 0;

  height: 100%;

  width: 100%;

  z-index: 1;

  margin: 0;

  padding: 0;

}

.gallery li {

  position: absolute;

  top: 0;

  left: 0;

  height: 100%;

  width: 100%;

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  opacity: 0;

  -webkit-transition: opacity 2.0s ease-in-out 0.0s;

  -o-transition: opacity 2.0s ease-in-out 0.0s;

  transition: opacity 2.0s ease-in-out 0.0s;

}

.gallery li:nth-child(1) {

  background-image: url("https://github.com/showzadomain/showzatheband.github.io/blob/master/assets/images/bg_1.JPG?raw=true");

}

.gallery li:nth-child(2) {

  background-image: url("https://github.com/showzadomain/showzatheband.github.io/blob/master/assets/images/bg_2.JPG?raw=true");

}

.gallery li:nth-child(3) {

  background-image: url("https://github.com/showzadomain/showzatheband.github.io/blob/master/assets/images/bg_3.jpg?raw=trueg");

}

[data-background="1"] .gallery li:nth-child(1),

[data-background="2"] .gallery li:nth-child(2),

[data-background="3"] .gallery li:nth-child(3) {

  opacity: 1;

}

.hero {

  position: relative;

  z-index: 2;

  width: 100%;

  height: 100%;

  background: url("https://raw.githubusercontent.com/showzadomain/showzatheband.github.io/master/assets/images/showza.png") rgba(0,0,0,0.15) center center no-repeat;

  background-size: 65%;

}

@media screen and (max-width: 1200px) {

    .topnav {

      -webkit-box-pack: justify;

          -ms-flex-pack: justify;

              justify-content: space-between;

      -webkit-box-align: center;

          -ms-flex-align: center;

              align-items: center;

      width: 100%;

    }

    .topnav button {

      display: inherit;

    }

    .topnav ul {

      -webkit-box-orient: vertical;

      -webkit-box-direction: normal;

          -ms-flex-direction: column;

              flex-direction: column;

      position: absolute;

      top: 100%;

      right: 0;

      margin: 0;

      padding: 0;

    }

    .topnav ul li {

      -webkit-box-pack: end;

          -ms-flex-pack: end;

              justify-content: flex-end;

    }

    .topnav[data-state="closed"] ul {

      display: none;

    }

}

<html>

  <head>

    <meta charset="UTF-8">

    <title>showzatheband</title>

    <link rel='icon' href='favicon.ico' type='image/x-icon'>

    <link href="index.css" rel="stylesheet" type="text/css"/>

  </head>

  <body data-background="1">

    <menu class="topnav" data-state="closed">

      <a href="/" title="Homepage" class="logo"><img src="https://raw.githubusercontent.com/showzadomain/showzatheband.github.io/master/assets/images/showzafavcon.jpg" alt="showza_icon" width="125" height="125" /></a>

      <button>menu</button>

      <ul>

        <li><a href="#news" class="item">live dates</a></li>

        <li><a href="#news" class="item">gallery</a></li>

        <li><a href="#news" class="item">news</a></li>

      </ul>

    </menu>

    <div class="hero"></div>

    <ul class="gallery">

      <li></li>

      <li></li>

      <li></li>

    </ul>

  </body>

</html>