CODEWITHSUNDEEP
htmlcssimagesafari
Jake
Jake

Reputation: 2056

Web Content Displayed Incorrectly on Safari

After creating a quick site, I notice that images either don't show or are incorrectly formatted from Safari on my iPhone and Mac.

For example, I'm expecting assets/images/showza under @keyframes animate in index.css to display at 65% the width of the device, which works on Chrome for Windows 10 but on Safari it actually appears inflated to over 100%.

I suppose I'm looking for any Safari dependencies I may have missed, I'm not used to the discrepancies of web development.

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>

Upvotes: 0

Views: 179

Answers (1)

Jason Lydon
Jason Lydon

Reputation: 7180

So, the core issue appears to be trying to animate with two background images. I didn't find any know bug with "Safari" + "multiple images" but as we can see, it doesn't work as expected. If you remove the logo from that animation, it sort of works in Safari but it's not what I'd call "acceptable".

Like so:

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

Some other pointers:
1. Only animate the thing that changes and move the shared stuff to the main css selector. The values you add in 0 and 100% will only apply there, but I think you want it shared across all states. So it's better in the .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");
    }
}
  1. Anchors should wrap divs when just text is involved. This is my bias but your HTML got that divitis.

:(

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

:)

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

or

<a href="#news" title="Some helpful title"><span class="item">live dates</span></a>
  1. Also, run your CSS through some form of autoprefixer in hopes of having the best cross browser support. I'm a fan of: https://autoprefixer.github.io/

I rebuilt this how I would do it which involved changing everything to some degree. Hopefully it helps you on your way. It's totally biased yada yada but I think it accomplishes your goals and you can build off it.

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

Upvotes: 1

Related Questions