CSS animation issue iOS - ios

This code works well on Mozilla Firefox, Google Chrome, and MS explorer. However, it doesn't work at all on mobile devices, particularly iOS. Please let me know what needs to be added or removed to make it function properly.
HTML
<div class="bg-grad">
<div class="clouds">
<div class="cloud x1"></div>
</div>
</div>
CSS
/* BG Gradients
~-----------------------------------------*/
.bg-grad {
background: #000;
background: transparent url("http://www.freelargeimages.com/wp-content/uploads/2014/12/Landscape_01.jpg") center bottom no-repeat;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.bg-grad .bg-layer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
z-index: 6;
-moz-transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
-webkit-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.bg-grad .bg-layer.on {
opacity: 1;
}
/* Clouds
~-----------------------------------------*/
.cloud {
width: 100%;
height: 900px;
position: relative;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 5;
background: transparent url('http://freepngimages.com/wp-content/uploads/2014/11/ten-party-balloons.png') left bottom no-repeat;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
#media (max-width: 550px) {
.cloud {
display: none;
}
}
.x1 {
-moz-animation: moveclouds 40s linear infinite;
-webkit-animation: moveclouds 40s linear infinite;
animation: moveclouds 40s linear infinite;
width: 2036px;
height: 1608px;
}
#-webkit-keyframes moveclouds {
0% {
margin-left: 100%;
}
100% {
margin-left: -1400px;
}
}
#-moz-keyframes moveclouds {
0% {
margin-left: 100%;
}
100% {
margin-left: -1400px;
}
}
#-o-keyframes moveclouds {
0% {
margin-left: 100%;
}
100% {
margin-left: -1400px;
}
}
https://jsfiddle.net/r2uuvubg/2/

Related

z-index reversed in iOS and Safari macOS

The z-index of these images is set so they should be staked blue, red, green but in iOS browsers and Safari on macOS the order is reversed so they display green, red, blue.
Here is a CodePen, the issue effects all iOS browsers and Safari on macOS.
https://codepen.io/W3-design/pen/pBOJyy
HTML:
<div class="stacked-images">
<img src="https://via.placeholder.com/320x180/0000FF">
<img src="https://via.placeholder.com/320x180/FF0000">
<img src="https://via.placeholder.com/320x180/00FF00">
</div>
SCSS:
.stacked-images {
min-height: 500px;
position: relative;
margin: 20px;
img {
position: absolute;
opacity: 0.9;
transition: transform .5s ease-in-out;
transform: translateZ(-1000px) rotate3d(1,0,0,-55deg) rotate3d(0,0,1,-30deg);
-webkit-transform: translateZ(-1000px) rotate3d(1,0,0,-55deg) rotate3d(0,0,1,-30deg);
&:nth-of-type(1) {
z-index: 100;
top: 0;
}
&:nth-of-type(2) {
z-index: 90;
top: 80px;
}
&:nth-of-type(3) {
z-index: 80;
top: 160px;
}
&:hover {
transform: rotate3d(0, 0, 0, 0) scale(1.1,1.1);
-webkit-transform: rotate3d(0, 0, 0, 0) scale(1.1,1.1);
opacity: 1;
z-index: 101;
}
}
}
I would like the z-index to be the same across all browsers.
Here you are:
.stacked-images {
min-height: 500px;
position: relative;
margin: 20px;
}
img {
position: absolute;
opacity: 0.9;
transition: transform .5s ease-in-out;
transform: translateZ(-1000px) rotate3d(1, 0, 0, 55deg) rotate3d(0, 0, 1, -30deg);
}
img:nth-of-type(1) {
z-index: 100;
top: 0;
}
img:nth-of-type(2) {
z-index: 90;
top: 80px;
}
img:nth-of-type(3) {
z-index: 80;
top: 160px;
}
img:hover {
transform: rotate3d(0, 0, 0, 0) scale(1.1, 1.1);
opacity: 1;
z-index: 101;
}
<div class="stacked-images">
<img src="https://via.placeholder.com/320x180/0000FF">
<img src="https://via.placeholder.com/320x180/FF0000">
<img src="https://via.placeholder.com/320x180/00FF00">
</div>

CSS animation does not work on iPhone/iOS12.2

Below css animation works perfect on the old iOS versions.
However, it does not work proper on newest version, iOS12.2.
The animation starts and works when first visiting website. But after reloading browser, it does not start animation.
Any solutions?
.button {
display: block;
width: 400px;
height: 50px;
background-color: gray;
position: relative;
}
.button:before {
position: absolute;
left: -75%;
width: 25px;
height: 50px;
content: '';
display:block;
background-color: white;
-webkit-animation: shine 1.5s ease 0.5s infinite normal;
animation: shine 1.5s ease 0.5s infinite normal;
}
#-webkit-keyframes shine {
0% { left: -75%;}
50%, 100% { left: 125%; }
}
#keyframes shine {
0% { left: -75%; }
50%, 100% { left: 125%; }
}
<a class="button">Hello
</a>
Try the following example - before make sure that you clear browser cache:
.button {
display: block;
width: 400px;
height: 50px;
background-color: gray;
position: relative;
}
.button::before {
position: absolute;
left: 100px;
width: 25px;
height: 50px;
content: '';
display:block;
background-color: white;
-webkit-animation: shine 1.5s ease 0.5s infinite normal;
animation: shine 1.5s ease 0.5s infinite normal;
}
#-webkit-keyframes shine {
0% { left: -100px;}
50%, 100% { left: calc(100% + 80px); }
}
#keyframes shine {
0% { left: -100px; }
50%, 100% { left: calc(100% + 80px); }
}
<a class="button">Hello
</a>

CSS3 Animations, iOS Scrolling Issues

I've read quite a few SO posts on iOS scrolling issues, I'm aware a few people have had issues. I've tried numerous fixes but I'm absolutely stuck on this!
I'm making a one page website. The layout is a 3D cube, using CSS3 transforms and animations. In a nutshell, the problem is the content on the front face will scroll, the content on other faces wont. As far as I can tell this breaks when I rotate the faces to create the cube. The content in the right face will not scroll, it acts like overflow: hidden;
I don't know how useful this will be, but I've created an Fiddle. It uses on part of the code (the main idea) and the whole lot is quite a bit to post. Has anyone tried to get overflow content to scroll on iOS inside a rotated/transformed parent element before?
I'm going crazy, please help! Thanks!
Here's my SASS from the Fiddle;
body {
margin: 0;
padding: 0;
}
.cube-container {
width: 100%;
perspective: 2000px;
-webkit-perspective: 2000px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0,0,0);
.cube-shell {
position: relative;
z-index: 1;
margin: 0 auto;
transform-style: preserve-3d;
transform: rotateY( 0deg ) translateX( 0px );
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0,0,0);
animation-duration: 1s;
animation-direction: normal;
animation-fill-mode: forwards;
animation-timing-function: ease;
&.rotate-center-to-right {
animation-name: center-to-right;
}
}
.face {
background-position: 50% 50%;
background-size: cover;
padding: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0,0,0);
position: relative;
z-index: 10;
text-align: center;
width: 100%;
// When we are in "cube mode"
&.cube-compatible {
overflow: hidden;
position: absolute;
// z-index: 5;
top: 0;
left: 0;
right: 0;
// z-index: 0;
}
> .face-inner {
overflow: scroll;
// -webkit-overflow-scrolling: touch;
}
}
.face-inner {
max-width: 1320px;
max-height: 100%;
height: 100%;
width: 100%;
padding: 40px 60px;
margin: auto;
// display: inline-block;
display: block;
vertical-align: middle;
position: relative;
z-index: 30;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
// Center face
.face-center {
position: relative;
text-align: center;
background: #ccc;
}
// Right face
.face-right {
transform-origin: center right;
background: #efefef;
}
.scroll-content {
overflow: scroll;
-webkit-overflow-scrolling: touch;
height: 100%;
}
.scrollable {
-webkit-backface-visibility: hidden;
}
}
#keyframes center-to-right {
0% {
transform: rotateY( 0deg ) scale3d( 1, 1, 1 );
}
// 15% {
// transform: rotateY( 0deg ) scale3d( 0.90, 0.90, 0.90 ) translateY( 50px );
// }
// 75% {
// transform: rotateY( -90deg ) scale3d( 0.90, 0.90, 0.90 ) translateY( 50px );
// }
100% {
transform: rotateY( -90deg ) scale3d( 1, 1, 1 );
}
}
https://jsfiddle.net/fkb241ys/14/

CSS spinner/loading icon does not display on Safari/iPhone

I am developing a mobile web application, and need to incorporate a loading spinner.
I have found one from a helpful website, and works on IE, FF and Chrome, but for some reason does not work on Safari on my iPhone 4.
HTML:
<div class="overlay">
<div class="loader">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
CSS:
.overlay {
opacity: 0.5;
background: #000;
width: 100%;
height: 100%;
z-index: 10;
top: 0;
left: 0;
position: fixed;
}
.loader {
width: 0px;
height: 0px;
margin: 50vh auto;
/*position: relative;*/
position: absolute;
left: 50%;
top: -100px;
}
.loader > div {
width: 6px;
height: 20px;
position: absolute;
left: -10px;
bottom: 15px;
border-radius: 5px;
transform-origin: 10px 35px;
transform: rotate(0deg);
animation: loader 0.8s infinite;
}
.loader > div:nth-child(2) {
transform: rotate(45deg);
animation-delay: 0.1s;
}
.loader > div:nth-child(3) {
transform: rotate(90deg);
animation-delay: 0.2s;
}
.loader > div:nth-child(4) {
transform: rotate(135deg);
animation-delay: 0.3s;
}
.loader > div:nth-child(5) {
transform: rotate(180deg);
animation-delay: 0.4s;
}
.loader > div:nth-child(6) {
transform: rotate(225deg);
animation-delay: 0.5s;
}
.loader > div:nth-child(7) {
transform: rotate(270deg);
animation-delay: 0.6s;
}
.loader > div:nth-child(8) {
transform: rotate(315deg);
animation-delay: 0.7s;
}
#keyframes loader {
0% {
background: transparent;
left: -10px;
transform-origin: 10px 35px;
}
30% {
background: white;
}
100% {
background: transparent;
left: 10px;
transform-origin: -10px 35px;
}
}
Plunker: http://plnkr.co/edit/ztBL6TN03yx41t4PRZMM?p=preview
Solution required prefixes, e.g:
.loader > div {
width: 6px;
height: 20px;
position: absolute;
left: -10px;
bottom: 15px;
border-radius: 5px;
-webkit-transform-origin: 10px 35px;
-moz-transform-origin: 10px 35px;
-ms-transform-origin: 10px 35px;
-o-transform-origin: 10px 35px;
transform-origin: 10px 35px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-animation: loader 0.8s infinite;
-moz-animation: loader 0.8s infinite;
animation: loader 0.8s infinite;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes loader {
0% {
background: transparent;
left: -10px;
-webkit-transform-origin: 10px 35px;
-moz-transform-origin: 10px 35px;
transform-origin: 10px 35px;
}
30% {
background: white;
}
100% {
background: transparent;
left: 10px;
-webkit-transform-origin: -10px 35px;
-moz-transform-origin: -10px 35px;
transform-origin: -10px 35px;
}
}
Plunkr: plnkr.co/edit/ztBL6TN03yx41t4PRZMM?p=preview

CSS3 transition problem on iOS devices

I'm trying out some webkit transitions on a site and have come across a problem on iOS devices. I have six images being given a random rotation every second. The transition works fine for five out of the six images but for some reason when using the iPad or the iPhone the sixth image disappears during the transition.
You can view the example HERE.
CSS:
.b1_needle {
width: 100%;
height: 100%;
z-index: 1;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: -webkit-transform 0.5s ease-out;
transition: transform 0.15s linear;
}
.b2_needle {
width: 100%;
height: 100%;
z-index: 1;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: -webkit-transform 0.5s ease-out;
transition: transform 0.15s linear;
}
.m1_needle {
width: 100%;
height: 100%;
z-index: 1;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: -webkit-transform 0.5s ease-out;
transition: transform 0.15s linear;
}
.m2_needle {
width: 100%;
height: 100%;
z-index: 1;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: -webkit-transform 0.5s ease-out;
transition: transform 0.15s linear;
}
.s1_needle {
width: 100%;
height: 100%;
z-index: 1;
-webkit-transform: rotate(0deg);
position: relative;
top: 6px;
transform: rotate(0deg);
-webkit-transition: -webkit-transform 0.5s ease-out;
transition: transform 0.15s linear;
}
.s2_needle {
width: 100%;
height: 100%;
z-index: 1;
-webkit-transform: rotate(0deg);
position: relative;
top: 7px;
transform: rotate(0deg);
-webkit-transition: -webkit-transform 0.5s ease-out;
transition: transform 0.15s linear;
}
Javascript:
var ranNum;
function randomFromTo(from, to){
ranNum = Math.floor(Math.random() * (to - from + 1) + from);
ranNum = ranNum + "deg";
return ranNum;
}
setInterval(function newNum(){
document.getElementById("needle_b1").style.webkitTransform = "rotate("+randomFromTo(0,293)+")";
document.getElementById("needle_b2").style.webkitTransform = "rotate("+randomFromTo(0,285)+")";
document.getElementById("needle_m1").style.webkitTransform = "rotate("+randomFromTo(0,314)+")";
document.getElementById("needle_m2").style.webkitTransform = "rotate("+randomFromTo(0,223)+")";
document.getElementById("needle_s1").style.webkitTransform = "rotate("+randomFromTo(0,130)+")";
document.getElementById("needle_s2").style.webkitTransform = "rotate("+randomFromTo(0,95)+")";
}, 2000);
I originally thought it was a memory issue but removing the transition from all but that one image doesn't make a difference. Any ideas for why this is would be happening?
Your z-index values are starting from -2. In my experience Webkit doesn't mind that you use negative values, but it seems Mobile Webkit does.
If you put a border on .b1_needle you will notice it appears below .bigOne, despite having a z-index of 100.
Start your z-indexes from 0 and then go up.
Copy and paste this CSS to verify:
#media screen and (orientation:portrait)
{
.container {
background: url(../images/back_port.jpg);
background-position: top left;
background-repeat: no-repeat;
width: 768px;
height: 1004px;
position: absolute;
top: 0px;
left: 0px;
z-index: 0;
}
.bigOne {
position: absolute;
right: 29px;
top: 21px;
background-color: #000;
border: 15px solid #999;
height: 350px;
-webkit-border-radius: 190px;
width: 350px;
z-index: 1;
-webkit-box-shadow: 0 3px 4px #000;
}
.bigTwo {
position: absolute;
right: 29px;
bottom: 21px;
background-color: #000;
border: 15px solid #999;
height: 350px;
-webkit-border-radius: 190px;
width: 350px;
z-index: 1;
-webkit-box-shadow: 0 3px 4px #000;
}
.midOne {
position: absolute;
right: 502px;
top: 243px;
background-color: #000;
border: 15px solid #999;
height: 218px;
-webkit-border-radius: 124px;
width: 218px;
z-index: 1;
-webkit-box-shadow: inset 0 3px 4px #000;
}
.midTwo {
position: absolute;
right: 502px;
bottom: 243px;
background-color: #000;
border: 15px solid #999;
height: 218px;
-webkit-border-radius: 124px;
width: 218px;
z-index: 1;
-webkit-box-shadow: inset 0 3px 4px #000;
}
.smallOne {
position: absolute;
top: 50px;
right: 437px;
background-color: #000;
border: 10px solid #999;
height: 128px;
-webkit-border-radius: 74px;
width: 128px;
z-index: 1;
}
.smallTwo {
position: absolute;
bottom: 50px;
right: 437px;
background-color: #000;
border: 10px solid #999;
height: 128px;
-webkit-border-radius: 74px;
width: 128px;
z-index: 1;
}
.statusBox {
position: absolute;
left: 273px;
top: 373px;
background-color: #000;
border: 10px solid #999;
border-radius: 8px;
width: 150px;
height: 237px;
z-index: 1;
-webkit-box-shadow: 0 3px 4px #000;
}
.iconBox {
position: absolute;
left: 465px;
top: 463px;
width: 264px;
height: 58px;
background-color: #000;
border: 10px solid #999;
border-radius: 8px;
z-index: 1;
-webkit-box-shadow: 0 3px 4px #000;
}
}
#media screen and (orientation:landscape)
{
.container {
background: url(../images/back_land.jpg);
background-position: top left;
background-repeat: no-repeat;
width: 1024px;
height: 748px;
position: absolute;
top: 0px;
left: 0px;
z-index: 0;
}
.bigOne {
position: absolute;
left: 21px;
top: 29px;
background-color: #000;
border: 15px solid #999;
height: 350px;
-webkit-border-radius: 190px;
width: 350px;
z-index: 1;
-webkit-box-shadow: 0 3px 4px #000;
}
.bigTwo {
position: absolute;
right: 21px;
top: 29px;
background-color: #000;
border: 15px solid #999;
height: 350px;
-webkit-border-radius: 190px;
width: 350px;
z-index: 1;
-webkit-box-shadow: 0 3px 4px #000;
}
.midOne {
position: absolute;
left: 243px;
top: 482px;
background-color: #000;
border: 15px solid #999;
height: 218px;
-webkit-border-radius: 124px;
width: 218px;
z-index: 1;
-webkit-box-shadow: inset 0 3px 4px #000;
}
.midTwo {
position: absolute;
right: 243px;
top: 482px;
background-color: #000;
border: 15px solid #999;
height: 218px;
-webkit-border-radius: 124px;
width: 218px;
z-index: 1;
-webkit-box-shadow: inset 0 3px 4px #000;
}
.smallOne {
position: absolute;
left: 50px;
top: 437px;
background-color: #000;
border: 10px solid #999;
height: 128px;
-webkit-border-radius: 74px;
width: 128px;
z-index: 1;
}
.smallTwo {
position: absolute;
right: 50px;
top: 437px;
background-color: #000;
border: 10px solid #999;
height: 128px;
-webkit-border-radius: 74px;
width: 128px;
z-index: 1;
}
.statusBox {
position: absolute;
left: 428px;
top: 99px;
background-color: #000;
border: 10px solid #999;
-webkit-border-radius: 8px;
width: 150px;
height: 237px;
z-index: 1;
-webkit-box-shadow: 0 3px 4px #000;
}
.iconBox {
position: absolute;
left: 370px;
top: 380px;
width: 264px;
height: 58px;
background-color: #000;
border: 10px solid #999;
border-radius: 8px;
z-index: 1;
-webkit-box-shadow: 0 3px 4px #000;
}
}
.statusData{
width: 126px;
height: 100%;
margin-left: auto;
margin-right: auto;
}
.statusLogo{
background: url(../images/mccaLogo.png);
height: 87px;
width: 100%;
}
.digitalTxt{
font-family: 'Digital7Mono';
font-size: 32px;
color: #fff;
width: auto;
margin-left: auto;
margin-right: auto;
margin-top: 3px;
}
.statusDate{
height: 48px;
width: 100%;
border-top: 2px #999 solid;
}
.statusTime{
height: 48px;
width: 100%;
border-top: 2px #999 solid;
}
.statusLoc{
height: 48px;
width: 100%;
border-top: 2px #999 solid;
}
.b1_notch {
width: 100%;
height: 100%;
background: url(../images/b1_back.png);
background-position: center;
background-repeat: no-repeat;
z-index: 1;
}
.b1_needle {
width: 100%;
height: 100%;
z-index: 2;
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
-webkit-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.b2_notch {
width: 100%;
height: 100%;
background: url(../images/b2_back.png);
background-position: center;
background-repeat: no-repeat;
z-index: 1;
}
.b2_needle {
width: 100%;
height: 100%;
z-index: 2;
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
-webkit-transition: -webkit-transform 0.5s linear;
transition: transform 0.5s linear;
}
.m1_notch {
width: 100%;
height: 100%;
background: url(../images/m1_back.png);
background-position: center;
background-repeat: no-repeat;
z-index: 1;
}
.m1_needle {
width: 100%;
height: 100%;
z-index: 2;
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
-webkit-transition: -webkit-transform 0.5s linear;
transition: transform 0.5s linear;
}
.m2_notch {
width: 100%;
height: 100%;
background: url(../images/m2_back.png);
background-position: center;
background-repeat: no-repeat;
z-index: 1;
}
.m2_needle {
width: 100%;
height: 100%;
z-index: 2;
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
-webkit-transition: -webkit-transform 0.5s linear;
transition: transform 0.5s linear;
}
.s1_notch {
width: 100%;
height: 100%;
background: url(../images/s1_back.png);
background-position: center;
background-repeat: no-repeat;
z-index: 1;
}
.s1_needle {
width: 100%;
height: 100%;
z-index: 1;
position: relative;
top: 6px;
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
-webkit-transition: -webkit-transform 0.5s linear;
transition: transform 0.5s linear;
}
.s2_notch {
width: 100%;
height: 100%;
background: url(../images/s2_back.png);
background-position: center;
background-repeat: no-repeat;
z-index: 1;
}
.s2_needle {
width: 100%;
height: 100%;
z-index: 2;
position: relative;
top: 7px;
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
-webkit-transition: -webkit-transform 0.5s linear;
transition: transform 0.5s linear;
}

Resources