Getting the position of the translated element
I am trying to translate the position of a div using CSS3 inside another div with a property overflow: hidden
.
Here's a jsFiddle that demonstrates this: https://jsfiddle.net/meeuz3w9
The top position of the element is not updated when trying to get it using jQuery position().top
.
I have no idea why this is happening, does anyone have a solution?
Updated: This doesn't work in Chrome 44 on OSX, but does work in other browsers
source to share
After playing with it for a while, I think I have an answer:
This is a performance issue
Chrome uses resources to make the animation more fluid by creating a script to get fewer callbacks to be called and fewer positions to update.
While Firefox uses resources to keep both updates, this makes the animation less flexible, but the script gets more updated positions.
In Chrome, the call profile is also very irregular (2 to 100 calls per position), and in Firefox, up to 4 calls per position.
In this fiddle I tried to improve performance by using inline calculus in a global variable:
var position = function() {
return this.getBoundingClientRect().top -
this.offsetParent.getBoundingClientRect().top;
};
and avoiding using console.log ...
var callback = function(){
var top = position.call(callback.target);
if(benchmark[top] === undefined){
benchmark[top] = 0;
} else {
benchmark[top] += 1;
}
};
then I found this performance difference.
How to solve it
You can get more information on the differences between JavaScript animations and CSS animations: https://css-tricks.com/myth-busting-css-animations-vs-javascript/
So, after this reading, I suggest the following solution:
Do it with JavaScript
The animation you are describing is simple:
$('#bar').animate({
'translate3d': '-2000'
}, {
step: function (now, fx) {
console.log(now);
$(this).css({"transform": "translate3d(0px, " + now + "px, 0px)"});
},
duration: 1000,
easing: 'linear',
queue: false
},
'linear');
this way you will be able to handle the position in javascript at every tick, rather than asking it in CSS.
Hope this helps.
source to share