Conversion error: scale and overflow: hidden in Chrome

Question

Working with CSS3 transform: scale property, I found an interesting problem. I wanted to make a small zoom effect for photos. But when I used overflow: hidden and border-radius for the parent div, the child div expanded the bounds of the parent div.

Update:

The problem is not solved. If I add transition , it still doesn't work. I tried to solve this problem, but to no avail.

Here is a demo

Answer 1

This is a known bug in Webkit-based browsers - see # 62363 . You can add border:1px solid transparent; to your .wrap class to get around the problem.

For an updated requirement, adding a transition to an element with border-radius is another well-known Chomre / Webkit # 157218 error . Sorry, there are no known workarounds yet, although one comment on this error suggests that using chrome://flags and using the --ignore-gpu-blacklist flag fixes it in Chrome 29 (which just hit the Chrome channel dev today).

Answer 2

The transparent frame did not work for me, but to change the z-index of the .wrap div and image (in my case, the image is actually a video)

Here is the css:

 .videoContainer{ overflow: hidden; z-index: 10; } video{ margin-left: -55%; transform: scale(-1,1); -webkit-transform: scale(-1,1); -moz-transform: scale(-1,1); z-index: 0; } 

NOTE: see Jake Blues comment below on the need to position an element for z-index to work properly.

Answer 3

transform: translateZ(0); on the wrap element helped.

For more information about this technique, see CSS performance compared to translateZ (0) .

Answer 4

Both methods of solving this issuer worked fine:

• Add the following line to the parent shell ( z-index: 0 not required for the image itself): position: relative; z-index: 10 position: relative; z-index: 10

• Or add transform: translateZ(0); to the parent shell (with appropriate prefixes for better browser support)

Answer 5

This is due to the fact that the layers with the composition are not trimmed by their parent layers. So sometimes you need to bring the parent with overflow:hidden to your own layout layer so that it can correctly apply overflow:hidden .

So, you have to add the CSS transform: translateZ(0) property to the parent element of your transformed element.

 /* add to parent so it is composited on its own layer before rendering */ .parent-of-transformed-element { -webkit-transform:translateZ(0); transform:translateZ(0); } 

Then overflow:hidden will work due to the fact that the transformed element will be arranged at its own rendering level, like its transformed child.

Tested on latest Safari and Chrome sites on iOS and iOS devices

Answer 6

Strange, I only ran into this problem after upgrading to Chrome 65, and for me adding will-change: transform; for IFRAME styles to do their job.

Answer 7

Here is the solution .

HTML:

 <div class="wrap"> <div class="image"></div> </div> 

CSS:

 .wrap{ width: 400px; height: 260px; overflow: hidden; border-radius: 15px; border:1px solid transparent; } div.image{ background: url(http://blog.dothegreenthing.com/wp-content/uploads/2012/10/take-a-smile.jpg) no-repeat; width: 400px; height: 260px; } div.image:hover{ -webkit-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); cursor: pointer; border:1px solid transparent; } 

Chrome requires a transparent border surrounding the field. Hope this helps.

Answer 8

I had a similar problem with the latest version of Chrome 65. I have an iFrame video enlarged using transform: scale () in a div, and in the latest version of Chrome it no longer disguised itself on the sides and protruded from the parent container, even with overflow: hidden;

Although translateZ seemed to help, only when I used translateX on the parent did it mask the width correctly:

  transform:translateX(0); 

Answer 9

There is still a web browser in the browser mask (Safari and Chrome for iOS). And then all the workarounds above do not work. But using the custom property css -webkit-mask-box-image also helps for scaled masks.

Answer 10

I was after this for a long time, and the only thing that worked for me was rotate(0.1deg) translateZ(0) . So if you scale the item

 .something:hover img{ -webkit-transform: scale(1.1) rotate(0.1deg) translateZ(0); -moz-transform: scale(1.1) rotate(0.1deg) translateZ(0); -o-transform: scale(1.1) rotate(0.1deg) translateZ(0); transform: scale(1.1) rotate(0.1deg) translateZ(0); } 

without rotation, the fix does not work on my end.

If you add transform to ANY img parent (for example, rotate the container the image is in), you need to add the same fix, for example, to the element.

 .something_parent{ transform: translate(-9%,9%) rotate(0.1deg) translateZ(0); -webkit-transform: translate(-9%,9%) rotate(0.1deg) translateZ(0); -mos-transform: translate(-9%,9%) rotate(0.1deg) translateZ(0); -o-transform: translate(-9%,9%) rotate(0.1deg) translateZ(0); } 

Answer 11

sorry for my bad english.

if there is no positioned element on the page, there is no need to set both container elements and the z-index attribute of the child element.

just adding the z-index: 0 (or other) attribute to the container element.

 .container { border-radius: .14rem; overflow: hidden; z-index: 0; } .child { } 

Answer 12

Well ... trying to find a workaround found that

 -webkit-appearance: button; 

this behavior has been fixed, but it has some undesirable side effects if the element is not really a button, for example, the borders behave strangely, but, replacing <a> with <button> , in my case I saved the scaled content within its borders.