bradders bradders - 5 months ago 35
CSS Question

Zoom / Scale not working correctly in Safari

I am making a zoomable div, when a user hovers over one of the divs then that specific div zooms, this currently works...

My issue is mainly with Safari when using CSS zoom, all of the contents within the div jump, at first it scales nicely and then the contents jump down to their original size, this issue does not occur in either Firefox and Chrome.

Here is my css of the main zoomable div :

MAIN DIV

width:740px;
height:150px;
padding:10px;
background-color:#fff;
border:1px solid #ccc;
margin: 0 auto;
left:0;
right:0;
position: relative;
margin-bottom:10px;
transition:100ms;
font-family: Rubik;


MAIN DIV HOVER

border:1px solid #aaa;
-webkit-box-shadow: 3px 4px 8px -4px rgba(0,0,0,0.75);
-moz-box-shadow: 3px 4px 8px -4px rgba(0,0,0,0.75);
box-shadow: 3px 4px 8px -4px rgba(0,0,0,0.75);
transition:100ms;
cursor:pointer;
zoom:102%;
-ms-zoom: 1.02;
-webkit-zoom: 1.02;
-moz-transform: scale(1.02,1.02);
transition: 250ms;


I have made a JS fiddle to show the issue, the contents are messed up and this would normally be PHP generated, you can see the issue though when you hover over the wrapper using safari, with firefox the hover zoom effect is perfect and with chrome the content zooms however there is no transition. Thanks for any help

https://jsfiddle.net/04t5psbu/

Please understand, this is not an issue with making the div zoom... that works, my problem is with the content within the div, as you hover over the div all content within the div zooms together, this works perfectly in firefox, please check the fiddle using safari

Answer

use transform instead of zoom.

Remove extraneous { curly braces from html}

remove all the zoom css use -webkit-transform it should work now.

   #coupon:hover {
    border:1px solid #aaa;
   -webkit-box-shadow: 3px 4px 8px -4px rgba(0,0,0,0.75);
-moz-box-shadow: 3px 4px 8px -4px rgba(0,0,0,0.75);
box-shadow: 3px 4px 8px -4px rgba(0,0,0,0.75);
transition:100ms;
cursor:pointer;
-webkit-transform:  scale(1.02,1.02);
-moz-transform:  scale(1.02,1.02);
transition: 250ms;
Comments