Within my html code, there are various tiles containing two images (one in jpg format as the background and one in png with transparency as the foreground) along with a hover effect: When hovering over a tile, the image zooms in towards the position of the cursor while the front image moves away from it.
As you move the cursor horizontally, all vertical images animate as well, and vice versa.
For reference, here's an example incorporating html, javascript, and css:
http://jsfiddle.net/Lmcn0sxw/6/
The hover effect is functional, despite some minor bugs.
The animations can be easily implemented using javascript and transform3d, where item represents the current tile with the .item class. Variables like topRatioFront are calculated based on the mouse position relative to the tile.
item.find('.front').css('transform', 'translate3d(0,' + topRatioFront + 'px,0)');
item.find('.back').css('transform', 'translate3d(0,' + topRatioBack + 'px,0)');
Different variations can be explored in the javascript code within the jsfiddle link provided.
The primary tile features animation through 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 my experience, this effect functions seamlessly in Google Chrome on Linux Mint and Windows, and though slightly less smoothly in Mozilla Firefox, it remains acceptable.
The Issue at Hand
Upon viewing the site on Safari running on a Mac, both my friend and I noticed significant lag in the animations - almost appearing jittery. Surprisingly, the same issue persisted on Chrome for Mac as well, however, not on Safari for Mac.
How can I go about diagnosing and rectifying this discrepancy? It seems unlikely that the performance of the computers used is the root cause, especially considering this site, which employs a similar effect but functions flawlessly across browsers irrespective of the OS.
My Attempts to Resolve
Initially, I switched from using translate to translate3d under the impression that the latter was quicker - unfortunately, this change yielded no improvement.
Subsequently, I introduced a function called requestAnimationFrame, designed to aid in rendering animations. However, the outcome remained unchanged.
A Secondary Predicament
Specifically when testing on Safari (version 8.0.7), the matrix3d transform works as expected, yet all other transforms fail to take effect, neither on the active tile nor on any others. Oddly enough, CanIUse suggests that Safari 8 does support transform3d. While inspecting the item with the matrix3d transform, I notice the update reflected in the DOM tree; however, none of the elements under .back or .front exhibit the added transform3d property, leaving me perplexed on how to address this issue.