mardi 4 août 2015

Hover effect working on most browsers, but not on safari or chrome on a MAC

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://ift.tt/1HnyaQb

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.

Aucun commentaire:

Enregistrer un commentaire