CSS transition plus jQuery css method inconsistent between Safari and Chrome

Question

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!?!?!?!?

Nobita · Accepted Answer · 2014-06-27 04:22:12Z

1

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

answered Jun 27, 2014 at 4:22

Nobita

761 bronze badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS transition plus jQuery css method inconsistent between Safari and Chrome

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related