Transform Scale Property Not Working in Chrome & Safari

CSS 'transform: scale()' property doesn't work on iOS Safari and iOS Chrome too

First off, you should always include the non-prefixed property last in the list. transition and transform should be below all the prefixed versions.

So if it's supported, it's used, over a potentially old prefixed version.

Second, you're only transitioning transform. So -webkit-transform isn't going to get transformed. You're probably best off just transitioning all

Third, you haven't got a space between transform and .1s. Should be a space.

CSS3 Transition + Transform not working in Safari, but working in Chrome

Vendor prefix has to be at property not at value, so:

-o-transform: scale(1,1);

css transform scale not working in safari

Scale specifies two parameters for webkit-transform, try:

-webkit-transform:scale(0.9, 0.9);

Transform scale() Safari bug when used on elements with border

CSS transform scale() function appears to have a bug on Safari when it's used on elements with a border.

You can say that again! Unfortunately, the reported bug(s) for this (and similar) issues go back many years, with the following bug referenced in most:

• https://bugs.webkit.org/show_bug.cgi?id=27684 (Opened in 07/2009)

If you didn't catch the date, it's a 10 year old bug that's still causing developers issues today! YIKES.

Basically, the issue comes down to Safari rasterizing the layer. On transform/scale, it resizes the layer, however it does not re-render the rasterized layer. In your use-case, the rasterized image is scaled up, but the text/image is blurry.

As for a workaround/fix? There are a couple ways you can "address" this:

1) Force a re-render

A quick/easy fix is to force Safari to re-render your layer when you transform. One way this can be achieved is by applying a CSS property which you then change after transforming (some people have success changing a background-color, for example). For your specific use case, I had luck with the following combination:

img {
    outline: 1px solid #000;
    border: none;
}

img:hover {
    outline: none;
    border: 1px solid #000;
}

By toggling those specific values, I was able to force Safari to re-render the rasterized layer, thus rendering a sharp image (similar to the non-border example). Here's a JSFiddle with the full code example: https://jsfiddle.net/gc56brfh/

2) Scale down, then up

Another workaround, documented here, is to set the element's initial size to the "scaled up" dimensions, and then scale down the element until you're ready to scale it up. That way, the element is rasterized to the correct dimensions.

CSS wise, that may look like:

img {
    -webkit-transform: translateZ(0) scale(0.2);
    height: 250px;
}

img:hover {
    -webkit-transform: translateZ(0) scale(1);
}

In the above, we've set the initial size of the img to 250px (this is based on your original css, with images being 50px and then scaled up 5). We then scale down the image by 0.2, resulting in 50px. On hover, we then scale back up to 250px by setting scale(1).

Here's an updated JSFiddle: https://jsfiddle.net/df2zqgnx/

One thing to note is that other CSS properties might need to be updated with this workaround. For example, you'll notice in the fiddle I also needed to update the border from 1px to 5px to compensate for the scaling down.

Anyway, hope this was helpful and one of the solutions works for you!

---

Related Topics