title: Zoom / Scale not working correctly in Safari
body: <p>I am making a zoomable div, when a user hovers over one of the divs then that specific div zooms, this currently works...</p>
  
  <p>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.</p>
  
  <p>Here is my css of the main zoomable div :</p>
  
  <p>MAIN DIV</p>
  
  <pre><code>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;
  </code></pre>
  
  <p>MAIN DIV HOVER</p>
  
  <pre><code>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;
  </code></pre>
  
  <p>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 </p>
  
  <p><a href="https://jsfiddle.net/04t5psbu/" rel="nofollow">https://jsfiddle.net/04t5psbu/</a></p>
  
  <p>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 </p>