CSS3 Transition not working in Chrome anymore
Your problem is that you are trying to animate from an undefined property: you are changing left
to 239px
, but don't explicitly specify it as 0
initially. It therefore defaults to auto
, a value for which there is no valid smooth transition to 239px
.
Add left:0
to the base definition and you will be fine.
See a JSfiddle here demonstrating your problem in Chrome 32+.
Jon Girard
Updated on June 28, 2022Comments
-
Jon Girard almost 2 years
As far as I can remember, I didn't have any problems with the CSS3 transitions working for me, until now. Suddenly (possibly because of a chrome update or other modifications to my code) it has just stopped working in chrome (32.0.1700.77), but still works in all other browsers (and an older version of chrome).
@media screen and (max-width: 1325px) { .row-offcanvas { position: absolute; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; width: 100%; } button.toggle { display: inline-block; } .row-offcanvas-left, .sidebar-offcanvas { left: -239px; z-index: 9999; height: 700px; } .row-offcanvas-left.active { left: 239px; } .sidebar-offcanvas { position: absolute; top: 0; width: 239px; } }
I haven't made any changes to this part of the site and I can't explain why it might not work all of a sudden. The transition is for a panel which slides out when a button is clicked, triggered by this bit of javascript (not responsible for the animation).
$(document).ready(function() { $('[data-toggle=offcanvas]').click(function() { $('.row-offcanvas').toggleClass('active'); }); });