All geek questions in one place

Transform scale property not working in Chrome & Safari

.tricky { width:200px; height:200px; border-radius: 50%; border: 0px solid; background: #2373bd; display:inline-block; position:relative; overflow: hidden; } .tricky_image { width:100%; height:100%; -moz-transition: all .6s ease; -webkit-transition: all .6s ease; -ms-transition: all .6s ease; -o-transition: all .6s ease; transition: all .6s ease; opacity:0.7; border-radius: 50%; filter:alpha(opacity=70); overflow:hidden; } .tricky_image:hover { opacity:1; filter:alpha(opacity=100); -webkit-transform:scale(1.2); transform:scale(1.2); } 
 <!doctype html> <html> <head> </head> <body> <div class="tricky"> <img class="tricky_image" src="location_images/sanfranciscoweb.png" alt="Example"> </div> </body> </html>

my desired effect only works in Firefox and I assume IE. I start with a transparent image with a wrapper div around it with a blue background. When the user hovers over the image, I want him to zoom in and restore the opacity to 100% without violating the specified width and height of the wrapper div. This works fine in Firefox, but when I run the animation in Chrome, the image exceeds the width of the blue wrapper div behind it. Here is my code and any help would be appreciated by JS Fiddle http://jsfiddle.net/yaLupdzo/1/ :

 <!doctype html> <html> <head> <style> .tricky { width:200px; height:200px; border-radius: 50%; border: 0px solid; background: #2373bd; display:inline-block; position:relative; overflow: hidden; } .tricky_image { width:100%; height:100%; -moz-transition: all .6s ease; -webkit-transition: all .6s ease; -ms-transition: all .6s ease; -o-transition: all .6s ease; transition: all .6s ease; opacity:0.7; border-radius: 50%; filter:alpha(opacity=70); overflow:hidden; } .tricky_image:hover { opacity:1; filter:alpha(opacity=100); -webkit-transform:scale(1.2); transform:scale(1.2); } </style> </head> <body> <div class="tricky"> <img class="tricky_image" src="location_images/sanfranciscoweb.png" alt="Example"> </div> </body> </html>
+6
source share
2 answers

This is a known issue identified here: https://code.google.com/p/chromium/issues/detail?id=157218

In hardware accelerated Webkit, animated layers receive ads on a different rendering surface during animation, and then drop at one point after the animation finishes.

It turns out there is a simple solution. Ask the container element to “push” to the same rendering level as the hardware accelerated child element, adding light animation to it:

 .tricky { width: 200px; height: 200px; border-radius: 50%; border: none; background: #2373bd; display: block; overflow: hidden; -webkit-transform:scale(1.0); } .tricky_image { width: 200px; height: 200px; -webkit-transition: all .6s ease; opacity: 0.7; } .tricky:hover { -webkit-transform:scale(1.0); } .tricky:hover .tricky_image { opacity: 1; -webkit-transform:scale(1.2); }

See: http://jsfiddle.net/yaLupdzo/3/

Note that I also added a simple animation to the default state of the parent container, so this same problem does not occur when you hover over it.

+4
source 
  -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2);

You can repeat your code for browser compatibility.

0
source

Source: https://habr.com/ru/post/974005/

More articles:


All Articles