网页内容在 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% {&nbsp; 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{&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; left: 0;&nbsp; &nbsp; top: 0;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; height: 100vh;&nbsp; &nbsp; animation: animate 16s ease-in-out infinite;&nbsp; &nbsp; background-size: cover;}@keyframes animate{&nbsp; &nbsp; 0%,100%{&nbsp; &nbsp; &nbsp; &nbsp; 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");&nbsp; &nbsp; &nbsp; &nbsp; height: 100%;&nbsp; &nbsp; &nbsp; &nbsp; -webkit-appearance: textfield;&nbsp; &nbsp; &nbsp; &nbsp; background-position: center;&nbsp; &nbsp; &nbsp; &nbsp; background-repeat: no-repeat;&nbsp; &nbsp; &nbsp; &nbsp; background-size: 65%, cover;&nbsp; &nbsp; }&nbsp; &nbsp; 33%{&nbsp; &nbsp; &nbsp; &nbsp; 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");&nbsp; &nbsp; }&nbsp; &nbsp; 66%{&nbsp; &nbsp; &nbsp; &nbsp; 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");&nbsp; &nbsp; }}:).container{&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; left: 0;&nbsp; &nbsp; top: 0;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; animation: animate 16s ease-in-out infinite;&nbsp; &nbsp; background-size: cover;&nbsp; &nbsp; height: 100%;&nbsp; &nbsp; -webkit-appearance: textfield;&nbsp; &nbsp; background-position: center;&nbsp; &nbsp; background-repeat: no-repeat;&nbsp; &nbsp; background-size: 65%, cover;}@keyframes animate{&nbsp; &nbsp; 0%,100%{&nbsp; &nbsp; &nbsp; &nbsp; 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");&nbsp; &nbsp; }&nbsp; &nbsp; 33%{&nbsp; &nbsp; &nbsp; &nbsp; 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");&nbsp; &nbsp; }&nbsp; &nbsp; 66%{&nbsp; &nbsp; &nbsp; &nbsp; 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");&nbsp; &nbsp; }}div当只涉及文本时，锚点应该包裹s。这是我的偏见，但你的 HTML 有这种倾向。:(<a href="#news">&nbsp; <div class="item">&nbsp; &nbsp; live dates&nbsp; </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 bodywindow.setInterval(function(){&nbsp; var currentBackground = document.body.getAttribute("data-background") * 1,&nbsp; &nbsp; &nbsp; nextBackground = currentBackground + 1;&nbsp; if (currentBackground >= 3) {&nbsp; &nbsp; nextBackground = 1;&nbsp; }&nbsp; document.body.setAttribute("data-background", nextBackground);}, 5000);// menu controlsvar toggleMenu = document.querySelector(".topnav");var toggleMenuButton = toggleMenu.querySelector(" button");var toggleMenuState = function (evt) {&nbsp; evt.preventDefault();&nbsp; var currentState = toggleMenu.getAttribute("data-state");&nbsp; if (currentState === "closed") {&nbsp; &nbsp; toggleMenu.setAttribute("data-state", "open");&nbsp; } else {&nbsp; &nbsp; toggleMenu.setAttribute("data-state", "closed");&nbsp; }};toggleMenuButton.addEventListener("click", toggleMenuState);/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.26, autoprefixer: v9.7.3) */body {&nbsp; &nbsp; height: 100vh;&nbsp; &nbsp; margin: 0;}body {&nbsp; font-family: Helvetica;&nbsp; color: white;&nbsp; font-weight: bold;&nbsp; font-style: normal;&nbsp; font-size: 30px;}.topnav {&nbsp; position: fixed;&nbsp; top: 0;&nbsp; left: 0;&nbsp; list-style: none;&nbsp; z-index: 3;&nbsp; margin: 0;&nbsp; padding: 0;&nbsp; display: -webkit-box;&nbsp; display: -ms-flexbox;&nbsp; display: flex;&nbsp; -webkit-box-orient: horizontal;&nbsp; -webkit-box-direction: normal;&nbsp; &nbsp; &nbsp; -ms-flex-direction: row;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; flex-direction: row;}.topnav .logo img {&nbsp; border-radius: 100px;}.topnav button {&nbsp; display: none;}.topnav ul {&nbsp; display: -webkit-box;&nbsp; display: -ms-flexbox;&nbsp; display: flex;&nbsp; -webkit-box-orient: horizontal;&nbsp; -webkit-box-direction: normal;&nbsp; &nbsp; &nbsp; -ms-flex-direction: row;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; flex-direction: row;}.topnav li {&nbsp; display: -webkit-box;&nbsp; display: -ms-flexbox;&nbsp; display: flex;&nbsp; -webkit-box-align: center;&nbsp; &nbsp; &nbsp; -ms-flex-align: center;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; align-items: center;}.topnav a,.topnav button {&nbsp; text-align: center;&nbsp; padding: 14px 16px;&nbsp; text-decoration: none;&nbsp;&nbsp;&nbsp; color: white;&nbsp; font-weight: bold;&nbsp; font-style: normal;&nbsp; font-size: 40px;}.topnav button {&nbsp; border: inherit;&nbsp; background: inherit;&nbsp; cursor:pointer;}.topnav button:before {&nbsp; content: "» ";&nbsp; margin-right: 0.25em;}.topnav[data-state="open"] button:before {&nbsp; content: "x ";}.topnav a:hover,.topnav button:hover {&nbsp; &nbsp; background-color: black;&nbsp; &nbsp; border-radius: 100px;}.topnav a.active {&nbsp; &nbsp; background-color: #4CAF50;&nbsp; &nbsp; color: white;}.gallery {&nbsp; position: fixed;&nbsp; top: 0;&nbsp; left: 0;&nbsp; height: 100%;&nbsp; width: 100%;&nbsp; z-index: 1;&nbsp; margin: 0;&nbsp; padding: 0;}.gallery li {&nbsp; position: absolute;&nbsp; top: 0;&nbsp; left: 0;&nbsp; height: 100%;&nbsp; width: 100%;&nbsp; background-position: center;&nbsp; background-repeat: no-repeat;&nbsp; background-size: cover;&nbsp; opacity: 0;&nbsp; -webkit-transition: opacity 2.0s ease-in-out 0.0s;&nbsp; -o-transition: opacity 2.0s ease-in-out 0.0s;&nbsp; transition: opacity 2.0s ease-in-out 0.0s;}.gallery li:nth-child(1) {&nbsp; background-image: url("https://github.com/showzadomain/showzatheband.github.io/blob/master/assets/images/bg_1.JPG?raw=true");}.gallery li:nth-child(2) {&nbsp; background-image: url("https://github.com/showzadomain/showzatheband.github.io/blob/master/assets/images/bg_2.JPG?raw=true");}.gallery li:nth-child(3) {&nbsp; 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) {&nbsp; opacity: 1;}.hero {&nbsp; position: relative;&nbsp; z-index: 2;&nbsp; width: 100%;&nbsp; height: 100%;&nbsp; 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;&nbsp; background-size: 65%;}@media screen and (max-width: 1200px) {&nbsp; &nbsp; .topnav {&nbsp; &nbsp; &nbsp; -webkit-box-pack: justify;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -ms-flex-pack: justify;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; justify-content: space-between;&nbsp; &nbsp; &nbsp; -webkit-box-align: center;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -ms-flex-align: center;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; align-items: center;&nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; }&nbsp; &nbsp; .topnav button {&nbsp; &nbsp; &nbsp; display: inherit;&nbsp; &nbsp; }&nbsp; &nbsp; .topnav ul {&nbsp; &nbsp; &nbsp; -webkit-box-orient: vertical;&nbsp; &nbsp; &nbsp; -webkit-box-direction: normal;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -ms-flex-direction: column;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; flex-direction: column;&nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; top: 100%;&nbsp; &nbsp; &nbsp; right: 0;&nbsp; &nbsp; &nbsp; margin: 0;&nbsp; &nbsp; &nbsp; padding: 0;&nbsp; &nbsp; }&nbsp; &nbsp; .topnav ul li {&nbsp; &nbsp; &nbsp; -webkit-box-pack: end;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -ms-flex-pack: end;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; justify-content: flex-end;&nbsp; &nbsp; }&nbsp; &nbsp; .topnav[data-state="closed"] ul {&nbsp; &nbsp; &nbsp; display: none;&nbsp; &nbsp; }}<html>&nbsp; <head>&nbsp; &nbsp; <meta charset="UTF-8">&nbsp; &nbsp; <title>showzatheband</title>&nbsp; &nbsp; <link rel='icon' href='favicon.ico' type='image/x-icon'>&nbsp; &nbsp; <link href="index.css" rel="stylesheet" type="text/css"/>&nbsp; </head>&nbsp; <body data-background="1">&nbsp; &nbsp; <menu class="topnav" data-state="closed">&nbsp; &nbsp; &nbsp; <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>&nbsp; &nbsp; &nbsp; <button>menu</button>&nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#news" class="item">live dates</a></li>&nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#news" class="item">gallery</a></li>&nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#news" class="item">news</a></li>&nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; </menu>&nbsp; &nbsp; <div class="hero"></div>&nbsp; &nbsp; <ul class="gallery">&nbsp; &nbsp; &nbsp; <li></li>&nbsp; &nbsp; &nbsp; <li></li>&nbsp; &nbsp; &nbsp; <li></li>&nbsp; &nbsp; </ul>&nbsp; </body></html>