Chrome CSS背景图像动画问题

Question

以下是代码https://jsfiddle.net/pk7zetdu/6/

的链接

class user:
    def __init__(self, usrName, pWord):
        self.usrName = usrName
        self.pWord = pWord

    def createUsrPw(self):
        f = open("usrName.txt", "a")
        f.write(usrName)
        f.write("   ")
        f.write(pWord)
        f.write("\n")
        f.close()


usr1 = user("Ben", "testPw")

usr1.createUsrPw()

尝试使用最新的稳定镀铬窗口打开它。

首先加载时，您可以看到幻灯片（div）滚动和滚动，比图像SRC更改并且div第二次使用新的bg滚动（可能具有小的img加载延迟）。一切都好！

然后请按小提琴中的RUN按钮再次观看。您现在可以看到幻灯片（div）滚动和滚动，而不是图像SRC更改，但它会在bg中使用上一个图像滚动，并在动画完成后立即更改。

我可以确保你这与图片加载无关，或者自己动摇，因为这是我真实项目中的一个大问题。 -webkit-backface-visibility：hidden; IMG解决了这个问题，但在更严肃的例子中介绍了其他问题：（。

有什么想法吗？

================更新

当我将.rollOut不透明度更改为非零（https://jsfiddle.net/pk7zetdu/8/）时，问题就消失了。似乎当img parent的不透明度为0时，chrome不会调整新的SRC，并且在动画中调整它时会出现问题。

Answer 1

你的第二张照片周围有一个阴影。您可以看到，如果您在选项卡中打开图像（您将看到图像与顶部和左侧有一些间隙）。 所以你的第二张图片不会加载背景中的第一张图片。它只是第二个图像周围有白色间隙。

更改图像将起到作用。用不同的图像检查这个小提琴。 - https://jsfiddle.net/pk7zetdu/11/

对于3秒后未展开的第二张图片，您可以将setTimeout更改为setInterval

Answer 2

这是Chrome March构建的bug。它已在最新版本中修复。无论如何（如果你关心游行版本）快速解决方法是将渐弱效果设置为0.0001而不是0。没有好的解决方案。