21

Transition rotate causes chrome to flash black screen. Is it a Chrome bug (works fine in Safari) or it can be fixed with some clever css.

div { 
  width:200px; 
  height:200px; 
  position:relative; 
  background:#ddd;
}

span { 
  display:inline-block; 
  position:absolute; 
  top:40px; 
  left:40px; 
  width:20px; 
  background:#007; 
  height:10px; 
  -webkit-transition: all .5s; 
}

div:hover > span { 
  -webkit-transform: rotate(180deg); 
}
<div>
    <span></span>
</div>

Example fiddle here.

The problem with this problem is that it doesn't occur every time so you'll have to hover the gray square several times and you should see the screen blinking in black.

Tested in:
Chrome 16.0.912.75
Chrome Canary 18.0.1010.0

Works fine on:
Safari 5.1.2 (6534.52.7)

All test on Snow Leopard

5
  • It doesn't happen in Chrome whatever or Chrome Canary on Windows 7.
    – thirtydot
    Jan 18, 2012 at 12:16
  • 2
    Ok. I found chromium bug report for this: code.google.com/p/chromium/issues/detail?id=87512
    – Litek
    Jan 18, 2012 at 13:49
  • same problem here: Chrome: 16.0.912.77 on MACOS and it does the same when you use scale
    – meo
    Jan 27, 2012 at 13:29
  • Chrome 21 has the same problem, windows 7.
    – atilkan
    Aug 21, 2012 at 7:51
  • Semi-relevant.. The black screen is currently occuring in 2018 with filter:hue-rotate
    – nardnob
    Jun 24, 2018 at 20:25

1 Answer 1

24

You can fix this by forcing compositing to stay on by giving -webkit-transform: translate3D(0, 0, 0) to the parent of the transformed element.

div { width:200px; height:200px; position:relative; background:#ddd; -webkit-transform: translate3D(0, 0, 0)}
span { display:inline-block; position:absolute; top:40px; left:40px; width:20px; background:#007; height:10px; -webkit-transition: -webkit-transform .5s; }
div:hover > span { -webkit-transform: rotate(180deg); }
<div>
  <span></span>
</div>

Check out the fiddle: http://jsfiddle.net/UHLFF/

4
  • That seems to do the trick. Thanks! +1 for webkit only solution to webkit (or chrome) only bug.
    – Litek
    Feb 9, 2012 at 13:42
  • 1
    Could you give any insight into how you figured this out please? Would love to know!
    – tonyhb
    May 21, 2012 at 20:00
  • I had the same issue and found the workaround on a chromium bug ticket. May 22, 2012 at 1:24
  • That "fix" brake LOTS of other functionalities, like fixed animations relative to screen
    – francogp
    Oct 1, 2020 at 14:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.