safari和多个大<img/>标签（透明png）导致巨大的减速

Question

我正在开发一个网站，它必须在某种程度上可以动态调整大小，并在后台有多层“闪烁的灯光”。在chrome和firefox中，性能可以忽略不计，因为我以半随机模式淡入和淡出对象，但在safari中，它们的存在会导致其他所有内容突然出现。

一个例子是：

<div class="light_layer">
    <img class="lights" src="1.png" width="1400" alt="">
    <img class="lights" src="2.png" width="1400" alt="">
    <img class="lights" src="3.png" width="1400" alt="">
    <img class="lights" src="4.png" width="1400" alt="">
    <img class="lights" src="5.png" width="1400" alt="">
    <img class="lights" src="6.png" width="1400" alt="">
    <img class="lights" src="7.png" width="1400" alt="">
    <img class="lights" src="8.png" width="1400" alt="">
    <img class="lights" src="9.png" width="1400" alt="">
    <img class="lights" src="10-blue.png" width="1400" alt="">
    <img class="lights" src="10.png" width="1400" alt="">
    <img class="lights" src="11.png" width="1400" alt="">
    <img class="lights" src="12.png" width="1400" alt="">
    <img class="lights" src="13.png" width="1400" alt="">
    <img class="lights" src="14.png" width="1400" alt="">
    <img class="lights" src="15.png" width="1400" alt="">
    <img class="lights" src="16.png" width="1400" alt="">
    <img class="lights" src="17.png" width="1400" alt="">
    <img class="lights" src="18.png" width="1400" alt="">
    <img class="lights" src="19.png" width="1400" alt="">
</div>

css：

.light_layer {
    position: absolute;
    width: 100%;
    height: 100%;
}

.light_layer img {
    position: absolute;
    width: 100%;
    min-width: 1200px;
    min-height: 677px;
}

起初我认为减慢速度会让事情变得缓慢，但即使我停止所有动作并且只是让图层和goto鼠标悬停在导航元素上，也会出现严重的减速。删除光照层，减速消失了。

safari检查器分析器中的绘制调用需要750 + ms。我的问题是，如果可能的话，我怎么能减少这种性能突破，同时保持它们的尺寸合适？

提前致谢