Web 内容在 Safari 上显示不正确

Question

创建快速站点后，我注意到在我的 iPhone 和 Mac.

上，Safari 中的图像无法显示或格式不正确

例如，我希望 index.css 中 @keyframes animate 下的 assets/images/showza 显示设备宽度的 65%，这适用于 Chrome for Windows 10 但在 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;

}
  
.topnav a {
    float: left;
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a:hover {
    background-color: black;
    border-radius: 100px;
}

.topnav a.active {
    background-color: #4CAF50;
    color: white;
}

.topnav .icon {
    display: none;
}

@media screen and (max-width: 1200px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
        float: right;
        display: block;
    }
}

@media screen and (max-width: 1200px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" lang="en">
  <title>
      showzatheband
  </title>
  <link rel='icon' href='favicon.ico' type='image/x-icon'>
  <link href="index.css" rel="stylesheet" type="text/css"/>
  <body class="body">
    <div class="container">
   <div class="outer">
  
          <div class="topnav" id="myTopnav">
            <a>
              <form name="myform" action="index.html" method="POST">
                <input type="image" class="image" src="assets/images/showzafavcon.jpg" alt="showza_icon" width="125" height="125">
              </form>
            </a>
            <div class="itemDiv"></div>
            <a href="#news">
              <div class="item">
                live dates
              </div>
            </a>
            <a href="#news">
              <div class="item">
                gallery
              </div>
            </a>
            <a href="#news">
              <div class="item">
                news
              </div>
            </a>
            <a href="javascript:void(0);" class="icon" onclick="myFunction()">
              <i class="fa fa-bars">
              <div class="menuItem">
                menu
              </div>
              </i>
            </a>
    </div>
   </div>
  </div>
  </body>
</html>

<script>
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
</script>

Answer 1

因此，核心问题似乎是尝试使用两个背景图像制作动画。我没有发现 "Safari" + "multiple images" 的任何已知错误，但正如我们所见，它没有按预期工作。如果您从该动画中删除徽标，它在 Safari 中可以正常工作，但它不是我所说的 "acceptable".

像这样：

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");
    }
}

当只涉及文本时，锚点应该换行 divs。这是我的偏见，但你的 HTML 得到了那个 divitis。

:(

<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/

我重建了这个我会做的事情，其中涉及在某种程度上改变一切。希望它对您有所帮助。这完全是有偏见的 yada yada，但我认为它实现了你的目标，你可以以此为基础。

// 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 lang="en">
  <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>

Web 内容在 Safari 上显示不正确

Web Content Displayed Incorrectly on Safari

html

css

safari

image