背景附件：修复了 translateX(0) 的断裂问题

我有一个具有固定背景的滚动元素：

.my-element {
   background: url(/foo.png) no-repeat right bottom;
   background-attachment: fixed;
}

效果很好！通常情况下。但是，如果我对其应用平移变换（即使是 0）（我需要动画），背景就会变为非固定（它锚定到 .my-element 的底部，该元素滚动到视图之外） :

.my-element {
   background: url(/foo.png) no-repeat right bottom;
   background-attachment: fixed;
   transform: translateX(0); // this breaks the "fixed" behavior
}

对此有一个类似的问题here https://stackoverflow.com/q/39633745/954986，但是 4 年前的答案说这个 bug 已经被修复了，而且只有 firefox 才有这个问题。我在 Firefox 和 Chrome 中就遇到了这种情况。

有什么办法可以避免这种情况吗？或者有没有办法在没有背景附件属性的情况下获得相同的行为？谢谢！

edit:刚刚添加了一个 jsfiddle 来演示该问题：https://jsfiddle.net/mozges0k/7/ https://jsfiddle.net/mozges0k/7/

我很难找到解决方法。将背景图像提取到自己的容器中并添加position: sticky看起来这是一个可行的解决方案，但最终没有成功。

我想到了另一个解决方案：如果你提取transform到它自己的类并在动画完成时删除该类？这好像是background-attachment再次开始工作时transform即使在运行时也会被删除。然后background-attachment可以发挥它的魔力，你的动画也可以运行。

<div class="my-element animate">Lorem ipsum</div>

.my-element {
    background: url(/foo.png) no-repeat right bottom;
    background-attachment: fixed;
}

.animate {
    transform: translateX(0);
}

function animationFinished() {
    const target = document.querySelector('.animate');
    target.classList.remove('animate')
}

虽然它不像我希望的那么简单和直接，但这would成为一个解决方案。 让我知道您的想法，祝您好运！