Panzoom: 在基于 webkit 的浏览器中放大是模糊的

panzoom 无法解决此问题。 这是一个webkit 问题

奇怪的 SVGPan 似乎没有这个问题： http ://www.cyberz.org/projects/SVGPan/tiger.svg

我仔细检查过，如果在 SVG 中的组元素上设置转换， panzoom 也不会。

嗨，伙计们
我从昨天开始就一直在使用 panzoom，并且仍在与我们的设计师核实 SVG 是否是处理我们当前任务的方式。 我想使用 panzoom 来放大 SVG 图像的不同部分，但在 Chrome 中它变得模糊，正如你们在这里讨论的那样。 我可以做些什么吗？ @timmywil您写道“在 SVG 中的组元素上设置变换”应该会有所帮助，但我该怎么做？ 任何帮助，将不胜感激。
这是我使用的一段代码：

var $map = $('.customers-map');
if ($map.length > 0)
{
    var $panzoom = $map.find('.panzoom').panzoom();
    $panzoom.parent().on('mousewheel.focal', function (e)
    {
        e.preventDefault();
        var delta = e.delta || e.originalEvent.wheelDelta;
        var zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
        $panzoom.panzoom('zoom', zoomOut, {
            increment: 0.1,
            animate: false,
            focal: e
        });
    });
}

我的 html 是：

<div class="customers-map">
    <div class="panzoom">
        <img src="images/customers/customers-map.svg">
    </div>
</div>

找到了解决方法。 我在每个 panzoomzoom 上在 -webkit-perspective 1 和 0 之间切换。

我正在做这样的事情：
var 标志 = 真；
函数 doThisOnEveryPanzoomzoom(){
$('#mypanzoom').css({
'-webkit-perspective': (flag?1:0)
});
标志 = !flag;
}

@tlimited有趣的技巧。 我会调查这个。

v1.12.4 是 chrome 桌面和移动设备的最后一个工作版本。 较新的版本仅适用于 ios safari 和 ios chrome。

tlimited 的解决方法适用于桌面版 Chrome，但不适用于移动设备。 我注意到在桌面 chrome 中，当图像模糊时，如果您使用 chrome 检查器并突出显示页面上的任何元素，图像会再次变得清晰。 重绘问题？ （我认为，透视变化会触发重绘）

我发现了一个对我来说也适用于移动设备的技巧（chrome 和原生 android 浏览器）。
只需将这些行放在 css 中：

.panzoom {
-webkit-backface-visibility：初始！重要；
-webkit-transform-origin: 50% 50%;
}

编辑：这似乎有效，
谢谢

我发现 gius80 的修复有效，但它在相当程度上降低了平板电脑的性能。

相反，我添加了一个 panzoom onEnd 回调，它会在用户完成他们的操作后稍微放大。 这似乎会导致 panzoom 重新渲染而不会模糊。 我确信有更好的方法可以找到问题的根源，但该解决方案似乎至少适用于 Chrome 桌面和 Android。

$el.panzoom({
    onEnd: function(){
        $el.panzoom( 'zoom', {increment: .01});
    }
});

这是一个catch-22。 这篇文章很好地解释了 webkit 问题。 Panzoom 使用-webkit-backface-visibility: hidden将元素提升到其自己的复合层，以利用硬件加速。 这提高了跨设备动画的性能。 也就是说，当动画的任何部分碰巧落在半像素上时，webkit 不会在不模糊的情况下为硬件加速层设置动画。 Panzoom 无法为此提供可靠、通用的解决方案。

所以，问题是，在 webkit 解决问题之前，我们是否想要更快的动画，但在 webkit 中有时会变得模糊，还是我们想要放弃硬件加速？

顺便说一句，即使 Panzoom 不强制分离层，它有时也会发生。 Webkit 会在某些情况下自动创建单独的图层（例如动画不透明度）。

“当动画的任何部分碰巧落在半像素上时”
也许可以使用 Math.floor 或 Math.ceil 将缩放级别强制为全像素？

这不是缩放级别。 从文章中可以看出，元素尺寸必须以可被 2 整除的方式开始，这不适合 Panzoom 强制执行（尤其是在响应式页面上）。

固定模糊是评论 lin 821 //'backface-visibility': 'hidden',

gius80 你的伎俩有效，非常感谢。

.panzoom {
     -webkit-backface-visibility: initial !important;
     -webkit-transform-origin: 50% 50%;
 }

我正在解决一个相关的问题，当启用 panzoom 时，缩小图像的初始渲染会变得非常像素化。 这不会发生在 Firefox 中，但会发生在 Chrome 和 IE 中。 当应用来自@gius80的建议时，它会在 Chrome 中正确呈现。 仍在测试 IE 并且至少在 IE9 中失败。 谢谢你让我更近了一步！

@jdonahue82它也适用于 Safari 吗？ Safari 中没有任何解决方案对我有用。

@marcelboettcher我同意。 没有一个解决方案适用于 Safari

根据我对自定义缩放（不是 jquery.panzoom）实现的经验：

一旦您将多个使用 CSS 变换的元素放置在另一个使用 CSS 位置的元素上，移动 Safari 和 Chrome 就会变得模糊。

我想这是多层硬件加速的普遍问题。

也许这有助于解决问题。

找到了另一种解决方法！

您可以在 panzoomzoom 上使用此代码强制重绘。

这与背面可见性相同：不过，初始速度非常慢。 因此，您可以将函数去抖动 100 毫秒。 我为此使用了 lodash，但您可以手动去抖动。

这是代码：

$('#panzoom-el').on('panzoomzoom', _.debounce( function () {
    this.style.display='none';
    this.offsetHeight;
    this.style.display='';
}, 100));

希望这可以帮助 ：）