CODEWITHSUNDEEP
javascripthtmlcssgoogle-chromefirefox
Maheshwar Selvakumar
Maheshwar Selvakumar

Reputation: 15

css transform with multiple attributes works on firefox but not in chrome

I'm trying to add style transform rotate as well as scale to a set of images. I used 

img.style = "transform: rotate(" + object[k].angle + "deg) scale(0.2);";

Using this the transform attribute rotate and style work fine in firefox, but when running on chrome it dooesnt work. So I tried using 

img.style.webkitTransform = "rotate(" + object[k].angle + "deg) scale(0.2);";

While using this in firefox and chrome only the scaling works. Since I am using different rotation angles for different image from a json I'm finding it difficult to call them into style sheet.css as an alternative

Upvotes: 1

Views: 76

Answers (1)

James Donnelly
James Donnelly

Reputation: 128791

It's because of the semicolon within the string. Chrome treats this as part of the style you're setting and ignores it as it believes it to be invalid. Removing it works fine in Chrome. Change:

img.style.webkitTransform = "rotate(" + object[k].angle + "deg) scale(0.2);";
                                                                          ^

To:

img.style.webkitTransform = "rotate(" + object[k].angle + "deg) scale(0.2)";

Upvotes: 2

Related Questions