CODEWITHSUNDEEP
cssgoogle-chrome
user1558399
user1558399

Reputation: 3

Chrome CSS transform error in windows 7

I'm trying to transform a pic on some event.. say click. It's working fine in chrome in linux and even XP, but chrome in windows 7 or 8 is not displaying it properly.

If u open the link below in firefox and chrome in windows 7 or 8, u will know what my problem is.

http://blacksheepinc.in/temp.php

Example Code :

<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
function rtt() { 
  $('#logo').css('-webkit-transition', 'all 2s ease-in')
  $('#logo').css('-moz-transition', 'all 2s ease-in')
  $('#logo').css('-webkit-transform','rotate(270deg)');
  $('#logo').css('-moz-transform','rotate(270deg)');
}
</script>
</head>
<body>
<pre>
Click on the pic
</pre>
<img id='logo' src='logo.png' onclick='rtt()' style='position:absolute;'/>
</body>
</html>

Anyone else faced it?

Thank you for your time!!!

Upvotes: 0

Views: 392

Answers (1)

moettinger
moettinger

Reputation: 5196

Have you tried making this more CSS and less JS? I trust CSS with my animations more than jQuery. Like this:

<style type="text/css">

  .logo {
    -webkit-transition:all 2s ease-in;
    -moz-transition: all 2s ease-in;
  }
  .logo.end {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
  }

</style>
<script type='text/javascript'>

  $('#logo').click(function() {
    $(this).addClass('end');
  });

</script>

Upvotes: 1

Related Questions