网页内容在 Safari 上显示不正确
创建快速网站后，我注意到 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;
}
芜湖不芜浏览 82回答 1
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 bodywindow.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 controlsvar 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>
随时随地看视频慕课网APP
相关分类
Html5