Probleme CSS3 Scale Transform and Overflow:Hidden on Safari

Probleme CSS3 scale transform and overflow:hidden on Safari

If you include -webkit-mask-image with a radial gradient on the .container class, this will create a mask which will prevent the content of the child element being shown outside the bounds of the parent. This is much like a layer mask used in a graphics application.

-webkit-mask-image: -webkit-radial-gradient(white, black);

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!

Scaling problem with -webkit-transform with mobile safari on iPad

I managed to solve the problem myself.

The solution is simple: just make sure the element is scaled to its original size to begin with:

-webkit-transform: scale(1);

There is one trick to it, though. If you, like I below, add a class to an element selected by #id, the #id has higher priority than the class and it will not show unless you tell the browser that it is important

-webkit-transform: scale(2) !important;

An alternative way to solve this is to not select the element by #id but by class (.block) or by element (div). Anything with lower priority than an id.

Solution follows:

<style type="text/css">

#block {
    position:absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 400px;
    -webkit-transition: -webkit-transform 3s ease-out;
    background-color: blue;
    -webkit-transform: scale(1);
  }

.zoom {
  -webkit-transform: scale(2) !important;
}
</style>
</head>

<body>
  <div id="block" onclick="className='zoom';">The Block</div>
</body>
</html>

Bug with transform: scale and overflow: hidden in Chrome

It's a known bug in Webkit-based browsers - see #62363. You can add a border:1px solid transparent; to your .wrap class to workaround the problem.

For the updated requirement, adding a transition to an element with a border-radius, that's another known Chomre/Webkit bug #157218. Sorry but no known general workaround still, although one comment on that bug says that using the chrome://flags and using the --ignore-gpu-blacklist flag fixes it in Chrome 29 (which just hit the Chrome dev channel today).

Having problems with CSS transform:scale or CSS transition in Chrome, Safari, Opera but fine in Firefox

This appears to be a duplicate of the question here: Webkit border-radius and overflow bug when using any animation/transition

Created a fiddle using the second answer to that question (added the CSS recommendation in that answer to the .picCircle rule): http://jsfiddle.net/nnvhacLe/1/

NOTE: in the fiddle, I also removed display: inline-block from the img.grow:hover rule.

Safari won't -webkit-transform: scale()

Somehow I got this fixed, and I have no idea how. -webkit- will always remain a mystery...

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);

Probleme CSS3 Scale Transform and Overflow:Hidden on Safari