Logo se déplace un peu après l'opacité: 1

Je ne sais pas pourquoi le code ci-dessous ne fonctionne pas ici alors qu'il fonctionne sur mon site Web, mais vous pouvez le voir au http://www.bsrp.eu/tijdelijk/index.php.Logo se déplace un peu après l'opacité: 1

Fondamentalement ce qui se passe, c'est que si vous faites défiler 1 page, le petit logo dans le coin supérieur droit apparaît. Il passe en 1 seconde de opacity:0 à opacity:1. Mais quand il est à opacity:1 le logo saute 1 ou 2 pixels vers la droite.

Y at-il un moyen de résoudre ce problème?

$(function() { 
 
    $(window).bind('scroll', function() { 
 
     if ($(window).scrollTop() > (window.innerHeight*0.3)) { 
 
      $('.logo-klein').addClass('show').removeClass('fade'); 
 
     } 
 
     else { 
 
      $('.logo-klein').removeClass('show').addClass('fade'); 
 
     } 
 
    }); 
 
});

.for_extra_scroll{ 
 
    height: 200vh; 
 
} 
 

 
.logo{ 
 
    height: 250px; 
 
    padding: .25vh; 
 
    float: right; 
 
    position: fixed; 
 
    right: 20px; 
 
    opacity: 0; 
 
    -webkit-transition: all 1s ease; 
 
    -moz-transition: all 1s ease; 
 
    -o-transition: all 1s ease; 
 
    -ms-transition: all 1s ease; 
 
    transition: all 1s ease; 
 
} 
 

 
.show { 
 
    opacity: 1; 
 
} 
 

 
.fade{ 
 
    opacity: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="for_extra_scroll"> 
 
    <a href="#header"><img src="http://teachersjobworld.com/employer/upload_logo/sample_logo.png"    class="logo"></a> 
 
</div>

Source

2017-04-03 Minegolfer

Je ne pense pas que je vois sauter. Mais que faire si vous changez «tout» en «opacité» dans votre «transition»? Je vois un peu "pop" en place une fois l'image rendue, mais c'est un sous-produit de l'affichage d'une très grande image si petite comme ça. http://codepen.io/mcoker/pen/evXpPr –

quel élément a la classe '.logo-klein' ciblée dans le script? – happymacarts

Je seconde la suggestion de Michael. Vous montrez l'image 1210x1182 px à environ 70x68. Vous devez réduire l'image d'origine car cela économise plus de bande passante et réduit le temps de chargement. – user31782

Ce problème semble être lié avec Anti-aliasing ainsi afin de le corriger, vous pouvez ajouter cet extrait à votre css:

img { 
    image-rendering: optimizeSpeed; 
    image-rendering: -moz-crisp-edges;   /* FF 3.6+ */ 
    image-rendering: -o-crisp-edges;   /* Opera 28+ */ 
    image-rendering: -webkit-optimize-contrast; /* Chrome 41+ (and Safari 6+) */ 
    image-rendering: optimize-contrast;   /* CSS3 Proposed */ 
    -ms-interpolation-mode: nearest-neighbor; /* IE8+ */ 
}

Source

2017-04-03 15:33:42

Merci cela a fonctionné. – Minegolfer

Je n'ai pas trouvé la raison réelle encore, mais changer transition-property: all seulement l'opacité (tansition: opacity 1s ease) semble résoudre le problème.

Source

2017-04-03 15:15:13 user31782

Cela a fonctionné mais je devais choisir, désolé :) – Minegolfer

@Minegolfer L'autre réponse est assez informatif. Je ne savais pas à ce sujet aussi. – user31782

Logo se déplace un peu après l'opacité: 1

Répondre

Questions connexes