John John - 2 months ago 20
CSS Question

Marquee replacement doesn't work on Safari 5.1.7 (Windows 10)

First, I saw this link with a similar question, but I did use animation in my CSS so the solution there isn't relavant:

CSS marquee doesn't work on Safari

Now, my code works fine in Chrome, FireFox, Opera, IE and edge. But on Safari it doesn't (the text doesn't move).

This is my html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="format.css">
</head>
<body>

<h1>updates</h1>
<div class="microsoft container">
<p class="marquee">
update 1
<br><br>
update 2
<br><br>
update 3
</p>
</div>

</body>
</html>


And this is my CSS file:

.container {
width: 93.5%;
height: 8em;
margin: 1em auto;
overflow: hidden;
background: white;
position: relative;
box-sizing: border-box;
}

.marquee {
top: 6em;
position: relative;
box-sizing: border-box;
animation: marquee 15s linear infinite;
}

.marquee:hover { animation-play-state: paused; }

/* Make it move! */
@keyframes marquee {
0% { top: 8em }
100% { top: -11em }
}

/* Make it look pretty */
.microsoft .marquee {
margin: 0;
padding: 0 1em;
line-height: 1.5em;
font: 1em 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}

.microsoft:before, .microsoft::before,
.microsoft:after, .microsoft::after {
left: 0;
z-index: 1;
content: '';
position: absolute;
pointer-events: none;
width: 100%; height: 2em;
background-image: linear-gradient(180deg, #FFF, rgba(255,255,255,0));
}

.microsoft:after, .microsoft::after {
bottom: 0;
transform: rotate(180deg);
}

.microsoft:before, .microsoft::before { top: 0; }

/* Style the links */
.vanity {
color: #333;
text-align: center;
font: .75em 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}

.vanity a, .microsoft a {
color: #1570A6;
transition: color .5s;
text-decoration: none;
}

.vanity a:hover, .microsoft a:hover { color: #F65314; }


Where am I wrong here?

Answer

In addition to my comments, here is an update of your code showing how you need write up the CSS to make it work across browser versions, where CSS properties that needs prefix to target older/different browsers has to be added several times for each version.

.container {
  width: 93.5%;
  height: 8em;
  margin: 1em auto;
  overflow: hidden;
  background: white;
  position: relative;
  box-sizing: border-box;
}
.marquee {
  top: 6em;
  position: relative;
  box-sizing: border-box;
  -webkit-animation: marquee 15s linear infinite;
  animation: marquee 15s linear infinite;
}
.marquee:hover {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
/* Make it move! */

@-webkit-keyframes marquee {
  0% {
    top: 8em
  }
  100% {
    top: -11em
  }
}
@keyframes marquee {
  0% {
    top: 8em
  }
  100% {
    top: -11em
  }
}
/* Make it look pretty */

.microsoft .marquee {
  margin: 0;
  padding: 0 1em;
  line-height: 1.5em;
  font: 1em'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}
.microsoft:before,
.microsoft::before,
.microsoft:after,
.microsoft::after {
  left: 0;
  z-index: 1;
  content: '';
  position: absolute;
  pointer-events: none;
  width: 100%;
  height: 2em;
  background-image: linear-gradient(180deg, #FFF, rgba(255, 255, 255, 0));
}
.microsoft:after,
.microsoft::after {
  bottom: 0;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.microsoft:before,
.microsoft::before {
  top: 0;
}
/* Style the links */

.vanity {
  color: #333;
  text-align: center;
  font: .75em'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}
.vanity a,
.microsoft a {
  color: #1570A6;
  transition: color .5s;
  text-decoration: none;
}
.vanity a:hover,
.microsoft a:hover {
  color: #F65314;
}
<h1>updates</h1>
<div class="microsoft container">
  <p class="marquee">
    update 1
    <br>
    <br>update 2
    <br>
    <br>update 3
  </p>
</div>