I'm doing a website and trying to make a sticky element on this part :
Everything is ok on chrome / firefox but the sticky element is flickering on safari MacOS. I tried to play with overflow /height etc.. but nothing seems to work.
A video of the issue : https://youtu.be/zNjn3uFHq3A
HTML code :
&--clicapp {
// z-index: -1;
min-height: 100vh;
position: sticky;
// top: 0;
.Section__content {
flex-direction: column-reverse;
background-color: white;
border-radius: 1.6rem;
padding: 2rem;
box-shadow: $shad;
@include lg {
flex-direction: row;
background-color: $bk__light;
border-radius: 0;
padding: 0;
box-shadow: none;
}
.Col {
&--right {
width: 100%;
position: relative;
margin-bottom: 4rem;
@include lg {
width: 55%;
margin-bottom: 0;
}
//&::before {
// content: none;
// position: absolute;
// left: -12%;
// top: 47%;
// @include lg {
// content: url('~assets/img/path.svg');
// }
//}
ul {
//height: 35rem;
min-height: 130vh;
margin: 0 auto;
position: relative;
overflow: auto;
scroll-behavior: smooth;
@include md {
width: 44rem;
}
@include lg {
margin-top: 8rem;
}
&::before {
content: ' ';
background-image: url('~assets/img/index/section-clicapp/degrade-up-mobile.svg');
display: block;
background-repeat: repeat;
width: 100%;
position: sticky;
height: 50px;
z-index: 1;
top: -1px;
pointer-events: none;
@include lg {
background-image: url('~assets/img/index/section-clicapp/degrade-up.svg');
}
}
&::after {
content: ' ';
background-image: url('~assets/img/index/section-clicapp/degrade-down-mobile.svg');
display: block;
background-repeat: repeat;
width: 100%;
position: sticky;
height: 50px;
z-index: 1;
bottom: -1px;
pointer-events: none;
@include lg {
background-image: url('~assets/img/index/section-clicapp/degrade-down.svg');
}
}
li {
opacity: .2;
display: flex;
flex-direction: column;
align-items: center;
transition: all 0.5s;
&.active {
opacity: 1;
}
h3 {
margin-top: 2rem;
margin-bottom: 2rem;
}
}
li + li {
margin-top: 5rem;
}
}
}
&--left {
min-height: 1200px;
width: 50%;
margin: 0 auto;
@include lg {
width: 40%;
margin: initial;
}
@include rwd(1281) {
width: 45%;
}
.sticky {
display: block;
position: sticky;
top: 0;
margin-left: auto;
margin-right: 90px;
img {
}
}
}
}
}
}<section
id="scrollClicApp"
class="Section Section--clicapp arrow"
data-aos="fade-left"
data-aos-duration="800"
data-aos-offset="300"
>
<div class="container">
<div class="Section__content Section__content--col">
<div class="Col Col--left">
<div class="sticky">
<img
alt="ClicScan"
src="~assets/img/index/section-clicapp/clicapp-slide1.png"
/>
</div>
</div>
<div class="Col Col--right">
<h2>
<span>ClicApp</span>
<br/>
L'application de gestion de votre clicScan
</h2>
<ul id="scrollList">
<li class="active">
<img
src="~assets/img/index/section-clicapp/analysis.svg"
alt="Analyse"
/>
<h3>
Mesure de l'empreinte santé
<!-- <span>+ visuel de l’empreinte santé dans une tablette</span> -->
</h3>
<p>
Usense capte les données spectrales associées à chaque mesure.
C'est sur la base de cette empreinte santé unique que Usense
peut proposer des pistes de diagnostic précises.
</p>
</li>
<li>
<img
src="~assets/img/index/section-clicapp/ia.svg"
alt="Intelligence artificielle"
/>
<h3>
Résultat d’analyse
<!-- <span>(visuel des valeurs brutes de biomarqueurs)</span> -->
</h3>
<p>
Une fois la mesure effectuée, les algorithmes Usense calculent
les concentrations de chaque biomarqueur. Usense propose une
lecture comparée aux valeurs de référence.
</p>
</li>
<li>
<img
src="~assets/img/index/section-clicapp/clear-visuel.svg"
alt="Créatinine"
/>
<h3>
Calcul de ratio à la créatinine
<!-- <span>(page des ratios)</span> -->
</h3>
<p>
Visualisation immédiate des ratios à la créatinine afin
d'éliminer les variables écran qui gênerait le diagnostic. La
comparaison aux valeurs usuelles permet de se concentrer
rapidement sur les valeurs hors norme.
</p>
</li>
<li>
<img
src="~assets/img/index/section-clicapp/clear-visuel.svg"
alt="Créatinine"
/>
<h3>
Aide au diagnostic
<!-- <span>(visuel data vizz Dashbaord)</span> -->
</h3>
<p>
Pour aiguiller toujours mieux le diagnostic, Usense propose
aussi de calculer différents indices de risque de pathologie.
</p>
</li>
</ul>
</div>
</div>
</div>
</section>Anyone having the same issue ?
