如何解决仅CSS的视差效果,translateZ无法在iOS Safari上使用
两个HTML元素,标头和主要。滚动时,标题比页面流慢。 这种视差效果是通过CSS属性Perspective / transform:translateZ实现的。
根据caniuse.com,这些属性不仅应在桌面浏览器上运行,而且应在iOS Safari浏览器上运行,而后者则不能。
为什么不呢?
/*
--perspective: 5px;
--distance: -2px;
*/
body {
overflow: hidden;
margin: 0;
}
.wrapper {
perspective: 5px;
perspective-origin: center top;
position: relative;
height: 100vh;
overflow-y: scroll;
overflow-x: hidden;
}
header {
height: 200px;
max-width: 100%;
background-image: url(https://placekitten.com/1200/400);
background-size: cover;
/* (perspective — distance) / perspective = scaleFactor */
transform: translateZ(-2px) scale( calc(7 / 5));
transform-origin: 50% top;
}
main {
height: 200vh;
background-image: linear-gradient( #ccf,#a00);
}
<div class="wrapper">
<header></header>
<main>Lorem ipsum dolor<br> sit amet consectetur adipisicing elit.<br> Ea vero necessitatibus delectus<br>ullam hic! Aliquam voluptatem pariatur vero vel nesciunt,eius velit commodi labore voluptatibus amet quidem aspernatur itaque ad.</main>
</div>
解决方法
此问题与该问题重复: CSS only Parallax Scrolling stoped working with IOS/PadOS13?
BTW是因为IOS 13, translateZ 无法在其上运行,也没有解决方法。似乎也可以在iOS 14上再次使用它。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。