Logo moves a bit after opacity:1

Question

I don't know why the code under here doesn't work here while it works on my website, but you can see it at http://www.bsrp.eu/tijdelijk/index.php .

Basicly what happens, is that if you scroll down 1 page, the little logo in the upper-right corner appears. It goes in 1 second from opacity:0 to opacity:1. But when it is at opacity:1 the logo jumps 1 or 2 pixels to the right.

Is there some way to fix this?

$(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>

I don't think I'm seeing it jump. But what if you change `all` to `opacity` in your `transition`? I do see it kind of "pop" into place once the image renders, but that's a byproduct of displaying a really large image so small like that. http://codepen.io/mcoker/pen/evXpPr — Michael Coker, Apr 03 '17 at 15:15
also what element has the `.logo-klein class` as targeted in the script? — happymacarts, Apr 03 '17 at 15:18
I second Michael's suggestion. You are showing 1210x1182 px image at around 70x68. You should scale down the original image as this save more bandwidth and reduce load time. — user31782, Apr 03 '17 at 15:20
Ye I allways change sizes when sites are finished, also the classes that dont do anything were there because I copy pasted it from my orignal code — Minegolfer, Apr 05 '17 at 10:48

score 2 · Accepted Answer · answered Apr 03 '17 at 15:33

This issue seems to be related with Anti-aliasing so in order to fix it, you can add this snippet to your 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+ */
}

score 1 · Answer 2 · answered Apr 03 '17 at 15:15

1

I haven't found the actual reason yet but changing transition-property: all to only opacity (tansition: opacity 1s ease) seems to fix the problem.

answered Apr 03 '17 at 15:15

user31782

7,087
14
68
143

@Minegolfer The other answer is quite informative. I didn't know about it too. – user31782 Apr 05 '17 at 12:25

Logo moves a bit after opacity:1

2 Answers2