CODEWITHSUNDEEP
cssmacossafari
joy
joy

Reputation: 3707

zoom css property doesn't applied on Mac safari browser

I have used gulp.spritesmith to generate sprite image and css. I have retina images which needs to be zoom by .5 to display correctly. It works perfectly fine on all browsers and devices except the Mac Safari. It doesn;t work on Mac safari when icon class is child of anchor tag. Following are code details.

http://plnkr.co/edit/WNSLrTeZCVQSk1Ex2mTj?p=preview

Following work

<div>
      <span class="rating-50"></span>
</div>

Following doesn't work

<a href="#">
      <span class="rating-50"></span>
</a>

Following is class details which does the icon scaling.

.rating-50{
zoom:.5;
-moz-transform:scale(.5);
-moz-transform-origin:0 0;
}

I did some research and found that -webkit-transform: scale(.5); works on Mac Safari however since my code is already having zoom:.5 therefore image gets scaled down twice. Please go through the running pluker and help to find out the root cause and suggest some solution.

Upvotes: 2

Views: 7498

Answers (1)

thomasfuchs
thomasfuchs

Reputation: 1

Safari doesn't support the IE-proprietary zoom CSS property.

There's a few different approaches. If it's background image you want to scale, use the CSS background-size property to specify how large the image should be in virtual pixels (or use 100% 100% to fill the element!).

If it's an arbitrary element, you can use…

-webkit-transform: scale(0.5);
transform: scale(0.5);

…to scale it.

Upvotes: 7

Related Questions