Chrome中鼠标移动时CSS转换延迟

Question

我有这个动画，我希望图像根据鼠标在图像上的位置进行缩放和平移。

这在Chrome和Safari中有效，但在Chrome中，它会等待鼠标停止移动，然后再应用转换http://codepen.io/mhkeller/pen/ZbdGQb

如果我删除400ms转换时间，转换将在Chrome中的mousemove上正确更新http://codepen.io/mhkeller/pen/GpbJrY

如果可能的话，我想保留过渡期。我试过添加backface-visibility: hidden;和translate3d(0,0,0)技巧，但似乎不起作用。

HTML（翡翠模板）

#pages
    .page
        img(src="https://raw.githubusercontent.com/ajam/pulp/master/imgs/pages/page-3.jpg")

CSS（带前缀的手写笔）

.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

我通过将其更改为矩阵变换来修复它。不确定为什么这是有效的，但Chrome、FF和Safari显示它是正确的。

$hover_img.css({
    'transform': 'matrix('+ scale_value +', 0, 0, '+ scale_value +', ' + scaled_x_perc/100*page_width + ', ' + scaled_y_perc/100*page_height + ')'
});