您好，提前感谢您的宝贵时间。
我在 safari 中创建了一个可重现的错误，我听说这很常见，并且我尝试了 Safari 的黑客来修复它，但遗憾的是没有运气。
问题很简单:
我有一个 float 卡片，其初始位置固定在内容的底部，它有 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 减少到 10，则当卡内的内容很长时会发生这种情况例如闪烁不会发生。
最佳答案
正如我们所知，固定位置不能很好地与 Safari 配合使用。
而当你齐心协力时—— Safari 会给你带来非常艰难的时光。
Position:Fixed === to parent
transform: translate3d(0px, 380px, 0px);
transition: transform 350ms cubic-bezier(0, 0.35, 0.4, 1) 0s;
@media screen and (-webkit-min-device-pixel-ratio: 0) {
.card {
transition: none !important;
}
}
检查此snadbox
关于javascript - iOS Safari 13.5 在内容较长的固定元素上闪烁，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62779688/