【发布时间】：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
width="100%"
height="100%"
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
width="100%"
height="100%"
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，则当卡内的内容很长时会发生这种情况@ 例如闪烁不会发生。
【问题讨论】：
标签： javascript html css mobile-safari flicker