CSS 在 Chrome 中鼠标移动延迟翻译转换

Question

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

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

如果我删除 400ms 过渡时间，过渡会在 Chrome http://codepen.io/mhkeller/pen/GpbJrY

中的 mousemove 上正确更新

如果可能，我想保留过渡。我试过添加 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 + ')'
});

CSS 在 Chrome 中鼠标移动延迟翻译转换

CSS translate transition delayed on mousemove in Chrome

css

google-chrome

css-transitions