iOS Safari 13.5 在内容较长的固定元素上闪烁
Posted
技术标签:
【中文标题】iOS Safari 13.5 在内容较长的固定元素上闪烁【英文标题】：iOS Safari 13.5 flickering on fixed element with long content 【发布时间】：2020-10-27 23:20:17 【问题描述】：您好，提前感谢您的宝贵时间。
我在 Safari 中创建了一个可重现的错误，我听说这很常见，我尝试了 Safari 的黑客来修复它，但遗憾的是没有运气。
问题很简单：
我有一个浮动卡片，其初始位置固定在内容的底部，它具有 click 事件侦听器，它所做的只是通过转换切换卡片的 position。
另一方面，我有container，它将卡片包裹在一个位置固定的元素中，当卡片的位置为transitioned并变为static时，该元素会修改。
我将article 设置为固定，这样卡片就可以使用页面的主滚动条，而没有其他滚动上下文。
以下是移动端预览的链接： https://qiisu.csb.app/
这是带有代码的代码沙箱： https://codesandbox.io/s/quirky-surf-qiisu?file=/index.html
如果您想在此处查看，还可以查看代码段：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<style>
*
box-sizing: border-box;
body
margin: 0;
#content
width: 100%;
display: block;
background-color: rgb(255, 255, 255);
border-radius: 15px 15px 0px 0px;
transform: none;
padding: 15px;
margin-top: -18px;
.media
height: 230px;
background-image: url(https://icdn2.digitaltrends.com/image/digitaltrends/kostenlose_programme_bildbearbeitung_1.jpg);
background-size: 100%;
background-position: top center;
background-repeat: no-repeat;
.common-text
tab-size: 4;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans",
"Helvetica Neue", sans-serif, serif;
-webkit-text-fill-color: rgb(35, 35, 35);
font-size: 18px;
letter-spacing: 0px;
line-height: 1.25;
</style>
</head>
<body>
<article id="prev-content">
<div class="media"></div>
<section id="content">
<div>
<span
style="
font-family: 'system-ui', '-apple-system',
'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
'Helvetica Neue', 'sans-serif', 'System Default', serif;
-webkit-text-fill-color: var(
--token-710882bd-9491-4cf6-bdf9-261847fdf8c6,
rgb(0, 255, 255)
);
font-size: 15px;
line-height: 1.2;
font-weight: 600;
"
>TECNOLOGÍA Y TENDENCIAS</span
>
</div>
<div>
<span
style="
font-family: 'Roboto Condensed', sans-serif;
-webkit-text-fill-color: hsl(0, 0%, 0%);
font-size: 26px;
line-height: 1.15;
font-weight: 700;
font-style: normal;
"
>Las ciberamenazas escalan entre las inquietudes de los CEO
españoles</span
>
</div>
<div>
<span
style="
font-family: 'system-ui', '-apple-system',
'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
'Helvetica Neue', 'sans-serif', 'System Default', serif;
-webkit-text-fill-color: hsl(0, 0%, 78%);
font-size: 14px;
line-height: 1.2;
font-weight: 500;
"
>Por Jean Francoise</span
>
</div>
<div
style="
width: 100%;
margin: 3px 0;
"
>
<svg
xmlns="http://www.w3.org/2000/svg"
style="width: 100%; height: 3px;"
>
<path
d="M 0 0 L 300 0 L 300 3 L 0 3 Z"
fill="rgb(0, 255, 255)"
name="Rectangle"
/>
</svg>
</div>
<div>
<span
style="
font-family: 'system-ui', '-apple-system',
'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
'Helvetica Neue', 'sans-serif', serif;
-webkit-text-fill-color: #555555;
font-size: 18px;
line-height: 1.2;
"
>La encuesta anual que elabora la firma de consultoría PWC señala
que el 61% de los consejeros españoles ve en el cibercrimen una
amenaza para su empresa</span
>
</div>
<div
style="
width: 100%;
margin: 3px 0;
"
>
<svg
xmlns="http://www.w3.org/2000/svg"
style="width: 100%; height: 3px;"
>
<path
d="M 0 0 L 300 0 L 300 3 L 0 3 Z"
fill="rgb(0, 255, 255)"
name="Rectangle"
/>
</svg>
</div>
<div>
<span
style="
font-family: system-ui, -apple-system,
BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',
'Helvetica Neue', sans-serif, serif;
-webkit-text-fill-color: rgb(0, 0, 0);
font-size: 18px;
line-height: 1.25;
"
><span
>La compañía norteamericana realiza desde hace más de 20 años un
análisis con las inquietudes de los empresarios de 42 territorios
distintos y permite establecer una comparativa seleccionando algún
país en concreto.</span
></span
>
</div>
<div>
<br />
<span
style="
font-family: system-ui, -apple-system,
BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',
'Helvetica Neue', sans-serif, serif;
-webkit-text-fill-color: rgb(0, 0, 0);
font-size: 18px;
line-height: 1.25;
"
>
En este sentido, las ciberamenazas han escalado posiciones en el
ránking de las preocupaciones para los consejeros delegados de
España. Los delitos cibernéticos ya son su segunda inquietud, por
delante incluso de la incertidumbre política y la velocidad con la
que se producen los cambios tecnológicos que cada vez más empresas
implementan.</span
>
</div>
<div
style="
height: 263px;
background-image: url('https://icdn2.digitaltrends.com/image/digitaltrends/kostenlose_programme_bildbearbeitung_1.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
"
></div>
<div>
<br />
<span class="common-text">
En este sentido, las ciberamenazas han escalado posiciones en el
ránking de las preocupaciones para los consejeros delegados de
España. Los delitos cibernéticos ya son su segunda inquietud, por
delante incluso de la incertidumbre política y la velocidad con la
que se producen los cambios tecnológicos que cada vez más empresas
implementan.
</span>
</div>
<div>
<br />
<span class="common-text">
A nivel global, los ciberdelitos no alcanzan ni comparte el primer
puesto la sobrerregulación, con un 36% de los encuestados situándo a
este indicador por delante de otros como los conflictos comerciales
(35% de los directivos) o la incertidumbre sobre el crecimiento
económico mundial (34%).
</span>
</div>
<div>
<span
style="
font-family: 'Roboto Condensed', sans-serif;
-webkit-text-fill-color: hsl(0, 0%, 0%);
font-size: 22px;
line-height: 1.2;
font-weight: 700;
font-style: normal;
"
>
El temor al cambio climático pasa del 3% al 20% en un año
</span>
</div>
<div>
<br />
<span class="common-text">
En este sentido, las ciberamenazas han escalado posiciones en el
ránking de las preocupaciones para los consejeros delegados de
España. Los delitos cibernéticos ya son su segunda inquietud, por
delante incluso de la incertidumbre política y la velocidad con la
que se producen los cambios tecnológicos que cada vez más empresas
implementan.
</span>
</div>
<div>
<br />
<span class="common-text">
A nivel global, los ciberdelitos no alcanzan ni comparte el primer
puesto la sobrerregulación, con un 36% de los encuestados situándo a
este indicador por delante de otros como los conflictos comerciales
(35% de los directivos) o la incertidumbre sobre el crecimiento
económico mundial (34%).
</span>
</div>
<div
style="
height: 138px;
background-image: url('https://icdn2.digitaltrends.com/image/digitaltrends/kostenlose_programme_bildbearbeitung_1.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
image-rendering: pixelated;
"
></div>
<div
style="
height: 230px;
background-image: url('https://icdn2.digitaltrends.com/image/digitaltrends/kostenlose_programme_bildbearbeitung_1.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
image-rendering: auto;
"
></div>
<div>
<span class="common-text">
En este sentido, las ciberamenazas han escalado posiciones en el
ránking de las preocupaciones para los consejeros delegados de
España. Los delitos cibernéticos ya son su segunda inquietud, por
delante incluso de la incertidumbre política y la velocidad con la
que se producen los cambios tecnológicos que cada vez más empresas
implementan.
</span>
</div>
<div>
<br />
<span class="common-text">
A nivel global, los ciberdelitos no alcanzan ni comparte el primer
puesto la sobrerregulación, con un 36% de los encuestados situándo a
este indicador por delante de otros como los conflictos comerciales
(35% de los directivos) o la incertidumbre sobre el crecimiento
económico mundial (34%).
</span>
</div>
<div>
<br />
<span class="common-text">
De esta manera, en consejo de los expertos consultados, hay que
empezar por material para los estiramientos: en este caso
colchonetas o esterillas. Se debe empezar por una sesión de carrera
suave, para ello es clave la cinta de correr. O la incertidumbre
sobre el crecimiento económico mundial (34%) con la que se producen
los cambios tecnológicos.
</span>
</div>
<div>
<br />
<span class="common-text">
De esta manera, en consejo de los expertos consultados, hay que
empezar por material para los estiramientos: en este caso
colchonetas o esterillas. Se debe empezar por una sesión de carrera
suave, para ello es clave la cinta de correr. O la incertidumbre
sobre el crecimiento económico mundial (34%) con la que se producen
los cambios tecnológicos.
</span>
</div>
<div>
<br />
<span class="mrf-lazyDetails--extras" class="common-text">
De esta manera, en consejo de los expertos consultados, hay que
empezar por material para los estiramientos: en este caso
colchonetas o esterillas. Se debe empezar por una sesión de carrera
suave, para ello es clave la cinta de correr. O la incertidumbre
sobre el crecimiento económico mundial (34%) con la que se producen
los cambios tecnológicos.
</span>
</div>
<div>
<br />
<span class="common-text">
De esta manera, en consejo de los expertos consultados, hay que
empezar por material para los estiramientos: en este caso
colchonetas o esterillas. Se debe empezar por una sesión de carrera
suave, para ello es clave la cinta de correr. O la incertidumbre
sobre el crecimiento económico mundial (34%) con la que se producen
los cambios tecnológicos.
</span>
</div>
<div>
<br />
<span class="common-text">
De esta manera, en consejo de los expertos consultados, hay que
empezar por material para los estiramientos: en este caso
colchonetas o esterillas. Se debe empezar por una sesión de carrera
suave, para ello es clave la cinta de correr. O la incertidumbre
sobre el crecimiento económico mundial (34%) con la que se producen
los cambios tecnológicos.
</span>
</div>
</section>
</article>
<style>
.container
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 10;
.card
will-change: transform;
transform: translate3d(0px, 380px, 0px);
opacity: 1;
transition: transform 350ms cubic-bezier(0, 0.35, 0.4, 1) 0s;
width: 100%;
min-height: 100vh;
background: white;
overflow: hidden;
border-radius: 15px 15px 0 0;
box-shadow: rgba(0, 0, 0, 0.3) 0px -2px 10px 3px;
</style>
<div class="container">
<div class="card">
<article>
<div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
et molestias placeat culpa? Fugiat ut magnam nemo a nihil.
Recusandae nesciunt aspernatur quos. Odit aperiam fugit ducimus
consequuntur. Adipisci, animi!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
et molestias placeat culpa? Fugiat ut magnam nemo a nihil.
Recusandae nesciunt aspernatur quos. Odit aperiam fugit ducimus
consequuntur. Adipisci, animi!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
et molestias placeat culpa? Fugiat ut magnam nemo a nihil.
Recusandae nesciunt aspernatur quos. Odit aperiam fugit ducimus
consequuntur. Adipisci, animi!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
et molestias placeat culpa? Fugiat ut magnam nemo a nihil.
Recusandae nesciunt aspernatur quos. Odit aperiam fugit ducimus
consequuntur. Adipisci, animi!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
et molestias placeat culpa? Fugiat ut magnam nemo a nihil.
Recusandae nesciunt aspernatur quos. Odit aperiam fugit ducimus
consequuntur. Adipisci, animi!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
et molestias placeat culpa? Fugiat ut magnam nemo a nihil.
Recusandae nesciunt aspernatur quos. Odit aperiam fugit ducimus
consequuntur. Adipisci, animi!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
et molestias placeat culpa? Fugiat ut magnam nemo a nihil.
Recusandae nesciunt aspernatur quos. Odit aperiam fugit ducimus
consequuntur. Adipisci, animi!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
et molestias placeat culpa? Fugiat ut magnam nemo a nihil.
Recusandae nesciunt aspernatur quos. Odit aperiam fugit ducimus
consequuntur. Adipisci, animi!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
et molestias placeat culpa? Fugiat ut magnam nemo a nihil.
Recusandae nesciunt aspernatur quos. Odit aperiam fugit ducimus
consequuntur. Adipisci, animi!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
et molestias placeat culpa? Fugiat ut magnam nemo a nihil.
Recusandae nesciunt aspernatur quos. Odit aperiam fugit ducimus
consequuntur. Adipisci, animi!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
et molestias placeat culpa? Fugiat ut magnam nemo a nihil.
Recusandae nesciunt aspernatur quos. Odit aperiam fugit ducimus
consequuntur. Adipisci, animi!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
et molestias placeat culpa? Fugiat ut magnam nemo a nihil.
Recusandae nesciunt aspernatur quos. Odit aperiam fugit ducimus
consequuntur. Adipisci, animi!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
et molestias placeat culpa? Fugiat ut magnam nemo a nihil.
Recusandae nesciunt aspernatur quos. Odit aperiam fugit ducimus
consequuntur. Adipisci, animi!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
et molestias placeat culpa? Fugiat ut magnam nemo a nihil.
Recusandae nesciunt aspernatur quos. Odit aperiam fugit ducimus
consequuntur. Adipisci, animi!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
et molestias placeat culpa? Fugiat ut magnam nemo a nihil.
Recusandae nesciunt aspernatur quos. Odit aperiam fugit ducimus
consequuntur. Adipisci, animi!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
et molestias placeat culpa? Fugiat ut magnam nemo a nihil.
Recusandae nesciunt aspernatur quos. Odit aperiam fugit ducimus
consequuntur. Adipisci, animi!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
et molestias placeat culpa? Fugiat ut magnam nemo a nihil.
Recusandae nesciunt aspernatur quos. Odit aperiam fugit ducimus
consequuntur. Adipisci, animi!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
et molestias placeat culpa? Fugiat ut magnam nemo a nihil.
Recusandae nesciunt aspernatur quos. Odit aperiam fugit ducimus
consequuntur. Adipisci, animi!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
et molestias placeat culpa? Fugiat ut magnam nemo a nihil.
Recusandae nesciunt aspernatur quos. Odit aperiam fugit ducimus
consequuntur. Adipisci, animi!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
et molestias placeat culpa? Fugiat ut magnam nemo a nihil.
Recusandae nesciunt aspernatur quos. Odit aperiam fugit ducimus
consequuntur. Adipisci, animi!
</p>
</div>
</article>
</div>
</div>
<script>
const card = document.querySelector('.card');
const container = document.querySelector('.container');
const prevContent = document.querySelector('#prev-content');
const positionTop = 'translate3d(0px, 30px, 0px)';
const positionBottom = 'translate3d(0px, 380px, 0px)';
let currentPrevContentPosition;
card.addEventListener('transitionend', (e) =>
console.log('e.propertyName', window.scrollY);
if (card.style.transform === positionTop)
container.style.position = 'relative';
currentPrevContentPosition = window.scrollY;
prevContent.style.transform = 'translate3d(0px, -' + currentPrevContentPosition + 'px, 0px)';
prevContent.style.position = 'fixed';
window.scrollTo(0, 0);
else
container.style.position = 'fixed';
prevContent.style.transform = '';
prevContent.style.position = '';
window.scrollTo(0, currentPrevContentPosition);
);
card.addEventListener('click', function ()
if (card.style.transform === positionTop)
card.style.transform = positionBottom;
else
card.style.transform = positionTop;
);
</script>
</body>
</html>非常简单的代码，但我无法让它在没有闪烁的情况下工作。
当您切换位置时，您将能够看到卡片闪烁。
我已经尝试了backface-visibility: hidden; 和transform: translate3d(0, 0, 0); 但它不起作用（您可以在代码中看到它），但是如果您将lorem ipsum 减少到@987654332，则当卡内的内容很长时会发生这种情况@ 例如闪烁不会发生。
【问题讨论】：
【参考方案1】：据我们所知，已修复的位置不适用于 Safari。
当你齐心协力时——野生动物园会给你带来非常艰难的时光。
Position:Fixed === to parent
transform: translate3d(0px, 380px, 0px);
transition: transform 350ms cubic-bezier(0, 0.35, 0.4, 1) 0s;
要移除闪烁，您必须仅移除 Safari 的变换动画。所以为此我为 safari 添加了特定的 css。
@media screen and (-webkit-min-device-pixel-ratio: 0)
.card
transition: none !important;
对于所有其他浏览器，您的动画将根据需要运行，但对于 safari，它需要滑动，但行为将根据您的需要运行。
查看snadbox
【讨论】：
以上是关于iOS Safari 13.5 在内容较长的固定元素上闪烁的主要内容，如果未能解决你的问题，请参考以下文章
iOS 10 Safari：防止在固定覆盖层后面滚动并保持滚动位置