CODEWITHSUNDEEP
jquerygoogle-chromecss-transitions
McShaman
McShaman

Reputation: 3985

CSS transition plus jQuery css method inconsistent between Safari and Chrome

This is a really weird issue! If any brains out their could explain I would appreciate it!

I am trying to get a CSS transition to run when a page loads using the following code (JS Bin)

HTML

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
</head>
<body>
    <div id="my-message">My message</div>
</body>
</html>

CSS

#my-message {
    overflow-y: hidden;
    background: yellow;
}

.my-transition {
    transition: height 4s;
}

JavaScript

$( document ).ready( function() {

    var $myMessage = $( '#my-message' );

    var height = $myMessage.height();

    $myMessage.height( 0 );

    $myMessage.addClass( 'my-transition' );

    $myMessage.css( 'height', height );

} );

The transition works as expected in Safari however in Chrome it just shows instantly (no transition).

The weird thing is if you change the last command in the JavaScript from $myMessage.css( 'height', height ); to $myMessage.heigh( height ); it works in both!

WHY!?!?!?!?

Upvotes: 1

Views: 126

Answers (1)

Nobita
Nobita

Reputation: 76

I think it is because of the behaviour of chrome, I added the setTimeout on your js and it worked

setTimeout(function(){  $myMessage.css( 'height', height );},1);

Updated jsbin

Upvotes: 1

Related Questions