Image modale qui apparaît avant un loader.

Bonsoir à tous,
J'ai le contenu d'une fenêtre modale qui apparaît furtivement avant un loader.
Le loader n'y est pour rien, cela m'arrivait avant de le mettre. Cela n'arrive que sur SAFARI (à confirmer).
Voici les CSS de la modale + de son contenu :

.oModal {
  position: fixed;
  z-index: 99999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  opacity:0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
  overflow-y: auto;
}


.oModal:target {
  opacity:1;
  pointer-events: auto;
}

.oModal:target > div {
  margin:5% auto;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}

.oModal > div {
  max-width: 60%;
  position: relative;
  margin: 1% auto;
  padding: 8px 8px 8px 8px;
  border-radius: 5px;
  background: #FF8C00;;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  overflow-y: auto;
}

.oModal > div h2 {
  margin:0;
}
@media only screen and (max-width: 768px) {
.oModal > div {
  max-width: 80%;
}
}







/*CV1*/
.cv_header{
    width: 99%;
    padding: 0;
 	background: #FF8C00;
    border-radius: 0px;
    height: 18vw;
    margin-top: 0px;
    position: absolute;
    margin-left: 0%;
    z-index: 99;
}

.section_cv{
    width: 100%;
    background-color:black;
    padding: 50px;
}

.section_cv h2{
    padding-top:0em;
    width:100%;
    text-align: center;
    letter-spacing: -0.1em;
    margin-bottom: -50em;
    line-height:0.8em;
    font-family: 'ralewayextralight', sans-serif;
    font-size: 15vw;
    color: #FF8C00;
}
.section_cv h3{
    padding-top: 40px;
    width:100%;
    text-align: center;
	font: 6vw "Chunkfive", Alfa Slab One, cursive, Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	line-height: 1.5vw;
	margin-top: 0px;
	margin-bottom: 0.5em;
	color: white;
}
.section_cv > div{
    width: 100%;
}
.photo_cv{
    text-align: center;
}
.photo_cv img{
    width: 30vw;
    height: 30vw;
    border-radius: 50%;
    margin-top:-50px;
    margin-bottom: 40px;
	text-align:center;
	position: relative;
	z-index: 999;
	border: 0.3rem solid rgba(211, 220, 50, .6);;
	border-color: white;
}
@media only screen and (max-width: 768px) {
.cv_header{
    width: 98%;
}
.photo_cv img{
    width: 50vw;
    height: 50vw;
    margin-bottom: 12px;
}
.section_cv h2{
	text-align: center;
    padding-top:0.4em;
    text-align: center;
    letter-spacing: -0.1em;	font:18vw raleway-extraligh, sans-serif;
    margin-bottom: 0px;
    line-height:0.5em;
}
.section_cv h3{
    padding-top: 40px;
	line-height: 1.5vw;
	 padding-top: 30px;
}
.section_cv p{
font-size: 3.8vw;
line-height: 4.6vw;
}
}
.prez{
    display: block;
    text-align: center;
    margin-bottom : 20px;
    color: black;
    border-radius: 0px;
}
.section_cv p{
width: 100%;
font-family: 'Raleway', sans-serif;text-align: center;
font-size: 3vw;
line-height: 4vw;
text-decoration: none;
color: white;
}
.social_cv{
	text-align: center;
	letter-spacing: .4rem;
}
.social_cv a{
	color: #008CBA; /* BLEU moyen */
}
.social_cv a:hover{
	color: #66ccff; /* BLEU clair */
}
@media only screen and (max-width: 1024px) {
.section_cv h2{
    margin-top:-200px;
    width:100%;
    text-align: center;
	font-size: 15vw;
}
}
@media only screen and (max-width: 575px) {
.section_cv p{
font-size: 4vw;
line-height: 5.5vw;
text-decoration: none;
color: white;
}
}

et son HTML :

<div id="oModal" class="oModal">
  <div><p><a href="#fermer"><i class="fa fa-times orange btn"></i></a></p>   
<div class="cv_header"></div>
    
<div class="section_cv">
        <div class="photo_cv">
            <img src="./imgs/di_be.jpg" alt="Ma photo de profil">
        </div>
        <div class="prez">
            <h2>Di Be</h2><h3>BIOGRAPHIE</h3>
          <p>texte.</p>
                    <div class="s-wrap s-type-2" role="slider" aria-valuemin="0" aria-valuemax="10" aria-valuenow="8">
    <ul class="s-content">
      <li class="s-item s-item-1"></li>
      <li class="s-item s-item-2"></li>
      <li class="s-item s-item-3"></li>
      <li class="s-item s-item-4"></li>
      <li class="s-item s-item-5"></li>
      <li class="s-item s-item-6"></li>
      <li class="s-item s-item-7"></li>
      <li class="s-item s-item-8"></li>
      <li class="s-item s-item-9"></li>
      <li class="s-item s-item-10"></li>
    </ul></div>
    <p>texte</p>
			<a title="modelmayhem" href="https://www.modelmayhem.com/bydmitri?fbclid=IwAR0vElpadv93qHedoS4_Uzfu5fbiI9_cmSjWSaUIckP9G-M_X5sFpay-w_4" target="_blank"><i class="fa fa-camera-retro camera fa-4x"></i></a>
</div></div>

Merci pour votre aide,
ED
Modifié par el_debutanti (23 May 2022 - 00:06)