大家好，提前感谢您的光临
我在safari中创建了一个可复制的错误，我听说这个错误很常见，我也尝试过safari的破解方法来修复它，但遗憾的是没有成功。
问题很简单：
我有一个浮动卡，它的初始位置固定在内容的底部，它有click事件侦听器，它所做的只是通过转换来切换卡的position。
另一方面，我有container，它将卡包裹在一个位置固定元件中，该元件在卡的位置为transitioned时进行修改，并变为static。
我将article设置为固定，这样卡片就可以使用页面的主滚动，而不会有其他滚动上下文。
以下是手机预览链接：https://qiisu.csb.app/
以下是包含代码的代码沙盒：https://codesandbox.io/s/quirky-surf-qiisu?file=/index.html
还有Snippet，如果你想在这里看到它：
<!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，则不会发生闪烁。
正如我们所知，Position修复了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