个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
好的，所以我在 Web 开发的世界里还是个新手。几个月前，我用 Css only Parallax Scrolling 完成了我自己的网站。 IOS13 出现了一些问题。
对于视差效果，我使用了 Keith Clark 的描述。 .一切都很顺利。它涵盖了桌面和移动设备上的几乎所有浏览器。
但是，对于新的 IOS13，CSS-Only-Parallax Effect停止工作。我做了很多研究，但我无法弄清楚。
有可能解决这个问题吗？
你们会怎么做？
/* 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>最佳答案
我遇到了同样的问题。 Chris Coyier from CSS-Tricks also wrote about it .
据我所知，没有办法解决这个问题。据我所知，从 iOS 13 开始不再支持 translateZ。
最令人沮丧的是，似乎没有办法检测到这种行为。 CSS.supports('transform', 'translateZ(10px)') 仍然返回“true”。通过 JS 读取的每一个值似乎都表明一切正常，但实际上并非如此。
我的印象是网站正常呈现(使用 translateZ 工作)。但是后来，iOS 13 中的这种“更正”以某种方式应用到了事实之后——超出了网站代码的范围。
关于html - 仅 CSS 视差滚动停止与 IOS/IPadOS 13 一起使用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58409202/
26
4
0
好的，所以我已经创建了自己的视差 jQuery/JS 脚本，但我只是不知道如何定位支持以下内容(需要以下内容)的浏览器: 支持背景位置的转换 我正在尝试的站点(预览)是: My Test Site 我
我正在制作带有固定背景和封面的整页。 当我添加视差时 - 动画看起来不错，但它滞后太多，我不知道为什么。我有一台很好的 PC，所以这不是这个问题，我之前让其他人产生了视差，这并不滞后。 有什么解决办法
我有一个奇怪的组合 - 视差和汉堡菜单。问题是米 导航会在您悬停的任何地方下降，不仅 当您将鼠标悬停在汉堡菜单图标上时。我认为这是一个厚厚的错误 代码，但我找不到它。我没有 jquery 的。还有，我
因此，我一直在努力围绕这种名为“视差”的整洁效果。基本上，背景滚动比前景元素慢。 我发现这个新的“技巧”正在起作用。随着滚动的进行，更改top属性以创建视差效果。 问题... 因此，为了提高性能并减轻
我的导航栏在 CSS 中加入视差效果后无法保持固定。 我在我的网站上放置了一个带有过渡 JS“Math.round($(window).scrollTop()) > 490)”的固定导航栏。 之后，我
这是一个非常模糊的问题，但我不确定从哪里开始，所以如果有人能给我一些想法，那你就太好了。 我想在我的网站主页上使用视差效果，但我不确定如何创建这种效果。我想要的效果在这里装箱http://davega
我使用了本教程中的视差脚本 http://tympanus.net/codrops/2011/01/03/parallax-slider/ 我在这里发布了一个 fiddle http://jsfidd
我想知道如何创建视差滚动效果之类的东西。向下滚动得越远，div 变得越不透明，在某个点之后，它又开始变得更加透明。我知道需要 JS/JQuery 才能做到这一点。谁能给我一个简单的方法来实现这个目标？
我的页面上有一个元素是绝对定位的。 我正在尝试编写一段 jQuery 代码，使该元素的滚动速度比页面上其他元素的滚动速度慢。 到目前为止，我已经写了这篇文章，但似乎根本无法让它发挥作用。有没有人有这方
我是 cocos2d 世界的新手，我正在开发我的第一个教程并面临一个问题我的问题是我有一个图像(1024 X 320)并且我的方向是横向我需要从右到左连续移动该图像为此目的我使用了 Ray 的太空射击
我需要调试此 jQuery 的帮助，其中我操纵容器中元素的上边距，该容器具有固定大小并将溢出设置为隐藏，以便我可以创建视差效果。视差有效，但如果您向下滚动一个像素，然后重新加载页面，它就会中断。谁能帮
我有一个 div，我想留在原地，这样导航栏和其他部分就可以通过它。 这是我目前的工作:
我建了一个网站，页面很长。我们决定使用纯 CSS3 为它添加视差并且它起作用了。 我从这里得到的 CSS3 视差代码: codepen.io/keithclark/pen/JycFw 后来，我们决定应
由于我对 Javascript/Jquery/HTML5/CSS3 还是个新手，我想我应该问一个问题给你们这些更有经验的程序员。 我有点卡在我的程序逻辑的开头。我想做一个具有视差“滚动”效果的网站，但
已关闭。此问题旨在寻求有关书籍、工具、软件库等的建议。不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，
-- 更新 2 -- 如果您使用单个相机计算距离，下面的文章非常有用(尽管它使用的是 Python 而不是 C++):Find distance from camera to object/marke
我有一个使用 skrollr 构建的视差网站在我到达页面末尾之前效果很好。我想要一个 成为您可以在页面上滚动的最后/最远点。 目前，如果我在大屏幕上查看时会留下巨大的空白，或者我无法进一步向下滚动以在
我不明白为什么会这样:我有: https://jsfiddle.net/d5jehq02/1 background forefront 我正在
我看到很多例子说明视差背景当你滚动或 ListView 视差但是我找不到一个清楚的例子如何在你滚动 Activity 时对图像实现视差效果。 可以在 Airbnb 应用程序中找到示例实现。向下滚动时，
我的背景图片来自background-url，我的视差适用于我放置的图片:background-attachment: fixed; 我怎样才能让背景图片在我滚动时稍微移动一点？ 这是我正在谈论的例子
我是一名优秀的程序员,十分优秀！