zooming/scaling not working in Chrome

[gib65]

Hello,

I'm experimenting with zooming/scaling.

I've got this CSS class attached to a div:



.zoom
{
-ms-zoom: 0.75;
-moz-transform: scale(0.75);
-moz-transform-origin: 0 0;
-o-transform: scale(0.75);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.75);
-webkit-transform-origin: 0 0;
}


This seems to work in IE, but not in Chrome. Is there something I need to added for Chrome browsers?

[Beverleyh]

shouldn't there be some non-vendor-prefixed properties in there too?

transform: scale(0.75);
transform-origin: 0 0;

If you need more help, please provide a link to your page.

[gib65]

Thanks Beverly,

It turns out it had to do with the way I was adding these style. I was adding them dynamically through javascript like so:

$("#MyDiv").css("-ms-zoom", "0.75");

...and apparently that doesn't work with these vendor transforms. However, if I add the class like so:

$("#MyDiv").addClass("zoom");

it works.

Oddly enough, I can't add normal css this way. So if I had:

.zoom
{
padding: 12.5%;
-ms-zoom: 0.75;
...
}

The padding won't show up when I add the class through javascript. But if I add the padding after I add the class like so:

$("#MyDiv").addClass("zoom");
$("#MyDiv").css("padding", "12.5%");

It works fine.

Are these vendor specific styles typically kept in a separate class from normal styles?

[Beverleyh]

Vendor prefixed properties are normally just added to the same class/id as the unprefixed one. Modern browsers are dropping the need for prefixes so, if you're not sure which you should use, you can use an online tool such as this http://pleeease.io/play/ just type in the unprefixed CSS and it will auto-generate all the prefixes you need for your CSS to work.