0

When you hover over image1div, it scales to 0.95 and fades to 80% opacity. It works in Chrome and Firefox but not Safari. It fades and scales instantly in Safari rather than smoothly in 0.5s.

.image1div {
 width: 350px;
 height: 350px;
 margin-top: 0px;
 float: right;
 background-color: #5a89ad;
 background-size: cover;
 filter:alpha(opacity=100);
 -webkit-transform: scale(1,1);
     -ms-transform: scale(1,1);
         transform: scale(1,1);
 -webkit-transition: opacity 0.5s ease, transform 0.5s ease;
         transition: opacity 0.5s ease, transform 0.5s ease;    
}

.image1div:not(.no-hover):hover {
  -webkit-transform: scale(0.95,0.95);
      -ms-transform: scale(0.95,0.95);
          transform: scale(0.95,0.95);
  opacity:0.8;
  filter:alpha(opacity=80);
}
frosty
  • 2,779
  • 6
  • 34
  • 63

1 Answers1

0

I think it has to do with the filter property. Transition is supported by safari: http://caniuse.com/#feat=css-transitions Also the filter property, but you need to add a prefix: http://caniuse.com/#feat=css-filters Let me know if it helps, if not, provide more details and we will find a workaround.

-- EDIT Instead of transition: opacity, transform. Use all, or check out how you can add multiple properties CSS transition shorthand with multiple properties?

Community
  • 1
  • 1
Alex Macra
  • 177
  • 8
  • Do you mean add -webkit- before filter? http://jsfiddle.net/60fnxv9r/1/ does not seem to be working – frosty May 14 '15 at 12:14
  • The problem with all is that there's an unwanted property and I don't actually know what it is – frosty May 14 '15 at 12:28
  • Details: The background-image of the div changes on-click of another div, and the background-images are different sizes (not squares). So it ends up transitioning a "stretch" like movement between changes when I use all, and I don't want that. – frosty May 14 '15 at 12:30
  • Regarding your last issue, you need to wrap a fiddle for that. The initial question was answered, tested in safari and it works. – Alex Macra May 14 '15 at 12:35
  • Yep, using all works, and I've decided that the effect it does is actually sort of cool, so I guess I can deal with it. Thanks! – frosty May 14 '15 at 12:36