CSS translate transition delayed on mousemove in Chrome [closed] - css

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have this animation where I want the image to scale and translate based on where the mouse is over the image.
This works in Chrome and Safari but in Chrome it waits for the mouse to stop moving before applying the transition http://codepen.io/mhkeller/pen/ZbdGQb
If I remove the 400ms transition time, the transition properly updates on mousemove in Chrome http://codepen.io/mhkeller/pen/GpbJrY
I'd like to preserve the transition if possible. I've tried adding backface-visibility: hidden; and the translate3d(0,0,0) trick but it doesn't seem to work.
HTML (jade template)
#pages
.page
img(src="https://raw.githubusercontent.com/ajam/pulp/master/imgs/pages/page-3.jpg")
CSS (stylus that becomes prefixed)
.page
width 250px
img
width 100%
transition transform 400ms cubic-bezier(0,0,.2,1) // This works when
JS
function Scale(){
function Normalizer(min, max){
return function(val) {
return (val - min) / (max - min);
}
}
function Interpolater(min, max, clamp){
return function(val) {
val = min + (max - min) * val;
return clamp ? Math.min(Math.max(val, min), max) : val;
}
}
var domain = new Normalizer(0, 1);
var range = new Interpolater(0, 1);
var s = function(val){
return range(domain(val));
};
s.domain = function(min, max){
if (!arguments.length) return domain;
domain = new Normalizer(min, max)
return s
};
s.range = function(min, max, clamp){
if (!arguments.length) return range;
range = new Interpolater(min, max, clamp)
return s
};
return s;
}
var settings = {
"desktopHoverZoomOptions": {
"scale": 1.5, // How much you want it to zoom
"fit": .96, // A value between 0 and 1. Defaults to 1. Set this to something around .96 if you want to cut off the edges a little bit, like in this demo. This setting is useful if you have white space around your panels
"padding": .25 // A value between 0 and .5. Sometimes you don't want the mouse to have to reach the edge of the page to fully zoom. Setting this to something like .25 will mean you've reached the edge of the zoomed in image when you're within 25% of the page edge.
}
}
$('#pages').on('mousemove', '.page', function(e){
var scale_value = settings.desktopHoverZoomOptions.scale,
fit = settings.desktopHoverZoomOptions.fit*100,
padding = settings.desktopHoverZoomOptions.padding,
$page = $(this),
$hover_img = $page.find('img'),
page_width = $page.width(),
page_height = $page.height(),
adjusted_x = e.pageX - $page.offset().left,
adjusted_y = e.pageY - $page.offset().top,
x_perc = adjusted_x / page_width,
y_perc = adjusted_y / page_height;
var translate_percentage = fit*((page_width*scale_value - page_width)/2)/page_width;
var scale = new Scale().domain(1- padding, padding)
.range(-1*translate_percentage, translate_percentage, true);
var scaled_x_perc = scale(x_perc),
scaled_y_perc = scale(y_perc);
$hover_img.css({
'transform': 'translate('+scaled_x_perc+'%,'+scaled_y_perc+'%) scale('+scale_value+')'
});
});

Answer 1

I fixed it by changing it to a matrix transformation. Not sure why this works but Chrome, FF, and Safari display it properly.
$hover_img.css({
'transform': 'matrix('+ scale_value +', 0, 0, '+ scale_value +', ' + scaled_x_perc/100*page_width + ', ' + scaled_y_perc/100*page_height + ')'
});