1

I'm trying the most simple of opacity transitions in Chrome, but I'm finding that although often it is smooth, sometimes it jumps straight to opacity: 0 or opacity: 1, without transitioning.

Simplified version, just for webkit:

<style type="text/css">
    .box{
        background-color: #ff0000;
        width:100px;
        height:100px;
        -webkit-transition: opacity 1s;
   }
   .box:hover{
       opacity:0;
   }
</style>

<div class="box"></div>

https://jsfiddle.net/bhydbakn/

I find the best way to make it go wrong is to roll over, click, roll off, roll over again, wait for it to reach opacity: 0, then really slowly (pixel by pixel) roll off the image in a downwards direction. When I do this, half the time it will jump straight back to opacity:1 instead of transitioning smoothly.

I'm Chrome 45.0.2454.101 m on Windows 7. Have tested on a colleague's PC and found the same issue.

Here's a video of it going wrong. It works until about half way: http://webm.host/41dce/

Jamie G
  • 1,653
  • 3
  • 20
  • 43

2 Answers2

2

Here's an updated code:

<style>
.box {
    background-color: #ff0000;
    width: 100px;
    height: 100px;
    opacity: 1;

    -webkit-transform: translateZ(0);
    transform: translateZ(0);

    -webkit-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;

    will-change: opacity;
}
.box:hover {
    opacity: 0;
}
</style>

<div class="box"></div>

Note the default opacity added to your .box container, an easing function and default hardware acceleration by using a transform declaration.

Note that I cannot reproduce your issue. It might be a browser thing.

UPDATE 2022: I have added CSS prefixes. Omit all -webkit- and -o- if you are building for modern browsers only.

Ciprian
  • 872
  • 1
  • 10
  • 30
  • No luck I'm afraid, I've tried all the things above - hardware acceleration, setting a default opacity, using different easing, different times (does seem to happen less the longer the transition takes), have tried transitioning 'all' instead of just 'opacity', have added a delay (it waits for the delay and then jumps instantly) have tried transitioning on a div inside .box with the :hover on .box. Always the same! – Jamie G Oct 06 '15 at 15:44
  • Do you have other transitions on the parent element? Or using the `*` selector? – Ciprian Oct 06 '15 at 15:51
  • No, just what you can see in the example code. I've just uploaded a video showing it in action: http://webm.host/41dce/ – Jamie G Oct 06 '15 at 16:36
  • What happens if you create an empty page with only that effect? No other code. – Ciprian Oct 07 '15 at 08:03
  • Yes, before I put it on fiddle it was a single HTML page with nothing but the .box div and the css. Even with just this, it still has this problem - on three of the computers in our office. – Jamie G Oct 07 '15 at 10:13
  • Tested the fiddle again about 20 times, it works fine for me. It's really weird. – Ciprian Oct 07 '15 at 10:19
  • Agreed, it's really wierd. Thanks for all your effort trying to replicate it! – Jamie G Oct 07 '15 at 11:02
  • 1
    Still applies in 2022... mad! – Sam Holguin Mar 18 '22 at 15:12
-3

This should fix your issue

$(".box").mouseenter(
  function(){
    $(this).animate({opacity:'0'},'1000')
  });
$(".box").mouseleave(
  function() {
    $(this).animate({opacity:'1'},'1000')
  });

https://jsfiddle.net/bhydbakn/2/

Bruno Landowski
  • 3,689
  • 2
  • 16
  • 24
  • The OP did not ask for a jQuery solution. He might not even use jQuery inside his project. – Ciprian Oct 06 '15 at 15:32
  • Not the solution I want, but it did make me think - I got the same problem when triggering the transition with jQuery: https://jsfiddle.net/bhydbakn/3/ – Jamie G Oct 06 '15 at 15:51