Menu
Okay so I’m quite new in the World of Web development. I finished my own Website with Css only Parallax Scrolling a few month ago. Some Problems came with the IOS13.
For the Parallax Effect, i used the Description of Keith Clark. Everything went pretty well. It covered up almost all browsers, on desktop and mobile devices.
With the new IOS13 though, the CSS-Only-Parallax Effect stoped working. I’ve done a lot of research, but i couldn’t figure it out.
Is it possible to fix the problem? What would you guys do?
/* Parallax base styles
--------------------------------------------- */
.parallax {
height: 500px; /* fallback for older browsers */
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
-webkit-perspective: 300px;
perspective: 300px;
}
.parallax__group {
position: relative;
height: 500px; /* fallback for older browsers */
height: 100vh;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.parallax__layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.parallax__layer--fore {
-webkit-transform: translateZ(90px) scale(.7);
transform: translateZ(90px) scale(.7);
z-index: 1;
}
.parallax__layer--base {
-webkit-transform: translateZ(0);
transform: translateZ(0);
z-index: 4;
}
.parallax__layer--back {
-webkit-transform: translateZ(-300px) scale(2);
transform: translateZ(-300px) scale(2);
z-index: 3;
}
.parallax__layer--deep {
-webkit-transform: translateZ(-600px) scale(3);
transform: translateZ(-600px) scale(3);
z-index: 2;
}
/* demo styles
--------------------------------------------- */
body, html {
overflow: hidden;
}
body {
font: 100% / 1.5 Arial;
}
* {
margin:0;
padding:0;
}
.parallax {
font-size: 200%;
}
/* centre the content in the parallax layers */
.title {
text-align: center;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/* style the groups
--------------------------------------------- */
#group1 {
z-index: 5; /* slide over group 2 */
}
#group1 .parallax__layer--base {
background: rgb(102,204,102);
}
#group2 {
z-index: 3; /* slide under groups 1 and 3 */
}
#group2 .parallax__layer--back {
background: rgb(123,210,102);
}
#group3 {
z-index: 4; /* slide over group 2 and 4 */
}
#group3 .parallax__layer--base {
background: rgb(153,216,101);
}
#group4 {
z-index: 2; /* slide under group 3 and 5 */
}
#group4 .parallax__layer--deep {
background: rgb(184,223,101);
}
#group5 {
z-index: 3; /* slide over group 4 and 6 */
}
#group5 .parallax__layer--base {
background: rgb(214,229,100);
}
#group6 {
z-index: 2; /* slide under group 5 and 7 */
}
#group6 .parallax__layer--back {
background: rgb(245,235,100);
}
#group7 {
z-index: 3; /* slide over group 7 */
}
#group7 .parallax__layer--base {
background: rgb(255,241,100);
}<!doctype html>
<html>
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>Unbenanntes Dokument</title>
<link href="parallax2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="parallax">
<div id="group1" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">Base Layer</div>
</div>
</div>
<div id="group2" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">Base Layer</div>
</div>
<div class="parallax__layer parallax__layer--back">
<div class="title">Background Layer</div>
</div>
</div>
<div id="group3" class="parallax__group">
<div class="parallax__layer parallax__layer--fore">
<div class="title">Foreground Layer</div>
</div>
<div class="parallax__layer parallax__layer--base">
<div class="title">Base Layer</div>
</div>
</div>
<div id="group4" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">Base Layer</div>
</div>
<div class="parallax__layer parallax__layer--back">
<div class="title">Background Layer</div>
</div>
<div class="parallax__layer parallax__layer--deep">
<div class="title">Deep Background Layer</div>
</div>
</div>
<div id="group5" class="parallax__group">
<div class="parallax__layer parallax__layer--fore">
<div class="title">Foreground Layer</div>
</div>
<div class="parallax__layer parallax__layer--base">
<div class="title">Base Layer</div>
</div>
</div>
<div id="group6" class="parallax__group">
<div class="parallax__layer parallax__layer--back">
<div class="title">Background Layer</div>
</div>
<div class="parallax__layer parallax__layer--base">
<div class="title">Base Layer</div>
</div>
</div>
<div id="group7" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">Base Layer</div>
</div>
</div>
</div>
</body>
</html>
267
I came across the same problem. Chris Coyier from CSS-Tricks also wrote about it.
There is no way around this issue, as far as I can see. From what I can tell, translateZ is not supported anymore in iOS 13 onward.
Most frustratingly though, there doesn't seem to be a way to detect this behavior. CSS.supports('transform', 'translateZ(10px)') still returns "true". Every single value read out via JS seems to indicate that everything works as it should, when in fact it doesn't.
I am under the impression that the website is rendered normally (with translateZ working). But then this "correction" in iOS 13 is applied after the fact somehow - outside the reach of website code.
97
I've tried many different things to make it work in iOS 13. I found https://developers.google.com/web/updates/2016/12/performant-parallaxing to be helpful, but none of the workarounds applied for this.
It seems it's just broken in iOS 13.
Happy news, though - it is working again in iOS 14.
I fired up a simulator to check, and ta-da:
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
