Question

在thumbnaviagtor中有一个div：

<div class="w" style="transform: perspective(2000px);"><img u="thumb"

这导致chrome和safari出错。它隐藏缩略图，直到我在developer-tools中停用css转换。我怎么能解决这个问题，我还没有发现任何api功能来改变它？

缩略图DIV：

<div u="thumbnavigator" class="jssort01" style="position: absolute; width: 600px; height: 100px; left: 0px; bottom: -303px;"><div style="position: absolute; top: 0px; left: 0px; width: 600px; height: 100px; transform-origin: 0px 0px 0px; transform: scale(1);"><div class="jssort01" style="position: relative; width: 600px; height: 100px; left: 0px; bottom: -303px; top: 0px; overflow: visible;"><div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 184px; top: 14px; width: 232px; height: 72px; z-index: 0;"><div style="width: 72px; height: 72px; top: 0px; left: 0px; position: absolute; overflow: hidden; display: none;"><div u="prototype" class="p" style="position: absolute; width: 72px; height: 72px; top: 0px; left: 0px;"><div class="w" style="transform: none;"><img u="thumb" src="upload/EnWsYCFTANzmdQ0Jx1onjoDWxNpxnz_t.jpeg" style="width: 100%; height: 100%; border: none; position: absolute; top: 0px; left: 0px;" class=""></div><div class="c"></div></div></div><div style="width: 72px; height: 72px; top: 0px; left: 0px; position: absolute; overflow: hidden; display: none;"><div u="prototype" class="p" style="position: absolute; width: 72px; height: 72px; top: 0px; left: 0px;"><div class="w" style="transform: none;"><img u="thumb" src="upload/4XpweYLARCgtPrfeD4TaFgEuVMuGDL_t.jpeg" style="width: 100%; height: 100%; border: none; position: absolute; top: 0px; left: 0px;" class=""></div><div class="c"></div></div></div><div style="width: 72px; height: 72px; top: 0px; left: 0px; position: absolute; overflow: hidden; display: none;"><div u="prototype" class="p" style="position: absolute; width: 72px; height: 72px; top: 0px; left: 0px;"><div class="w" style="transform: none;"><img u="thumb" src="upload/45fUDCINpncp14LD3w09C1DHCrMBOi_t.jpeg" style="width: 100%; height: 100%; border: none; position: absolute; top: 0px; left: 0px;" class=""></div><div class="c"></div></div></div><div style="position: absolute; z-index: 0; pointer-events: none; left: 0px; top: 0px;"></div></div><div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 184px; top: 14px; width: 232px; height: 72px; z-index: 0;"><div style="width: 72px; height: 72px; top: 0px; left: 0px; position: absolute; opacity: 0; background-color: rgb(0, 0, 0);"></div><div style="width: 72px; height: 72px; top: 0px; left: 0px; position: absolute; overflow: hidden; transform: perspective(2000px);"><div u="prototype" class="pav" style="position: absolute; width: 72px; height: 72px; top: 0px; left: 0px; transform: perspective(2000px);"><div class="w" style="transform: perspective(2000px);"><img u="thumb" src="upload/EnWsYCFTANzmdQ0Jx1onjoDWxNpxnz_t.jpeg" style="width: 100%; height: 100%; border: none; position: absolute; top: 0px; left: 0px; transform: perspective(2000px);" class=""></div><div class="c" style="transform: perspective(2000px);"></div></div><div style="width: 72px; height: 72px; top: 0px; left: 0px; z-index: 1000; display: none;"></div></div><div style="width: 72px; height: 72px; top: 0px; left: 80px; position: absolute; overflow: hidden; transform: perspective(2000px);"><div u="prototype" class="p" style="position: absolute; width: 72px; height: 72px; top: 0px; left: 0px; transform: perspective(2000px);"><div class="w" style="transform: perspective(2000px);"><img u="thumb" src="upload/4XpweYLARCgtPrfeD4TaFgEuVMuGDL_t.jpeg" style="width: 100%; height: 100%; border: none; position: absolute; top: 0px; left: 0px; transform: perspective(2000px);" class=""></div><div class="c" style="transform: perspective(2000px);"></div></div><div style="width: 72px; height: 72px; top: 0px; left: 0px; z-index: 1000; display: none;"></div></div><div style="width: 72px; height: 72px; top: 0px; left: 160px; position: absolute; overflow: hidden; transform: perspective(2000px);"><div u="prototype" class="p" style="position: absolute; width: 72px; height: 72px; top: 0px; left: 0px; transform: perspective(2000px);"><div class="w" style="transform: perspective(2000px);"><img u="thumb" src="upload/45fUDCINpncp14LD3w09C1DHCrMBOi_t.jpeg" style="width: 100%; height: 100%; border: none; position: absolute; top: 0px; left: 0px; transform: perspective(2000px);" class=""></div><div class="c" style="transform: perspective(2000px);"></div></div><div style="width: 72px; height: 72px; top: 0px; left: 0px; z-index: 1000; display: none;"></div></div></div></div></div></div>

Answer 1

请将$ HWA设置为false以禁用硬件加速。

var options = {
    ...,
    $ThumbnailNavigatorOptions: {
        ...
        $HWA: false,
        ...
    }
};

我会默认禁用缩略图的硬件加速，以便以后更新。

jssor thumbnail css转换错误

1 个答案: