1

In my html document, there are some tiles with two pictures (one jpg as a background and one png with transparency as a foreground) and with a hover effect: On the current tile which you are hovering, the image gets zoomed where your mouse is and the front image gets moved away from the cursor.

While moving the cursor only horizontally, all vertical pictures are animated too and the other way round.

Here is an example with all html, javascript and css:

http://jsfiddle.net/Lmcn0sxw/6/

The effect is working (with a few bugs, but that's not important).

The animations are easily added with javascript and transform3d where item is the current tile with the class .item. Variables like topRatioFron are calculated from the current mouse position relative to the current tile.

item.find('.front').css('transform', 'translate3d(0,' + topRatioFront + 'px,0)');
item.find('.back').css('transform', 'translate3d(0,' + topRatioBack + 'px,0)');

There are some variations which you can see in the jsfiddle javascript code.

The main tile gets animated with a matrix3d effect:

self.find(itemClass).css(
    'transform', 
    'matrix3d(1,0,0.00,' + leftRatio + ',0.00,1,0.00,' + topRatio + ',0,0,1,0,0,0,0,1)'
);

In the Google Chrome Browser on Linux Mint, it works perfectly. On Google Chrome on Windows, it works too. In Mozilla Firefox, it's not as perfect as in Google Chrome, but it's okay.

The actual problem

A friend opened this site on a Mac with Safari, and all animations were really laggy (it looked like it was shaking). Another friend opened this on a Mac in the Chrome browser, and it was shaking too, but this time not in Safari.

How can I test or find out what this is causing? It can't be the performance of the computer they used, because this site with the same effect is working perfectly in ALL browsers, regardless of the operating system.

What I tried

First, I used translate instead of translate3d (I read that the latter is faster), but It didn't help.

I later added a function called requestAnimationFrame which can help rendering animations. The result was the same.

The second problem

On Safari (I tried it with v8.0.7), the matrix3d transform works, but all other transforms don't work, not on the current tile and not on the others, but CanIUse tells me that transform3d is supported by Safari 8. When I inspect the item with the matrix3d transform, I can see it in the DOM tree being updated, but all of the elements from .back or .front, I can't see the transform3d added, and I have no idea how to fix this.

Luca Steeb
  • 1,795
  • 4
  • 23
  • 44

1 Answers1

1

I believe that this is the cause of your lag - offset = self.offset(). On each frame you query the DOM, which forces it to render the layout, and cause the stuttering. Instead read the offset once before the animations start.

You can also add to each element will-change: transform before the animation start.

Ori Drori
  • 183,571
  • 29
  • 224
  • 209
  • CanIUse tells me that Safari supports the transform property (http://caniuse.com/#feat=transforms3d). Furthermore, I think that the animation wouldn't even start when Safari wouldn't support it. – Luca Steeb Aug 04 '15 at 12:17
  • GREAT!!!! That was it. I upvoted it, but somebody else gave you a downvote for the question before. Thank you so much! I edited my answer because I have another problem. – Luca Steeb Aug 04 '15 at 13:07
  • And I don't think that `will-change` is needed, because `translate3d` will already be hardware accelerated. – Luca Steeb Aug 04 '15 at 13:15
  • No worries - my penance for rushing in. Regarding will-change - as I understand it, it can prepare the browser for a coming animation, even translate3d (it will promote it to a layer before the animation start - https://dev.opera.com/articles/css-will-change-property/, http://stackoverflow.com/questions/26907265/css-will-change-how-to-use-it-how-it-works – Ori Drori Aug 04 '15 at 13:56
  • Ah, thank you for the links. Can you read and maybe answer my second question too? – Luca Steeb Aug 04 '15 at 14:00
  • Welcome. Unfortunately, due to lack of mac at home I can't reproduce it. – Ori Drori Aug 04 '15 at 14:01