- Firefox-Version
- 152.0.1
- Betriebssystem
- Linux
Hallo,
ich habe auf meiner WordPress-Seite ein Hero-Bild, das langsam hineinzoomt. In Chrome, Chromium und anderen Browsern läuft die Animation absolut flüssig. In Firefox wirkt der Zoom dagegen ruckelig bzw. nicht sauber animiert.
Das Bild hat eine Auflösung von 3840×2160 (4K). Die Animation erfolgt über transform: scale() und nicht über background-size.
.hero-bg-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
transform: scale(1.08);
animation: heroZoom 12s ease-out forwards;
will-change: transform;
backface-visibility: hidden;
}
@keyframes heroZoom {
from { transform: scale(1.08); }
to { transform: scale(1.0); }
}
Bereits getestet:
- translateZ(0) entfernt
- will-change entfernt
- backface-visibility entfernt
- ease-out durch linear ersetzt
- Browser-Cache geleert
Das Verhalten bleibt unverändert und tritt nur in Firefox auf.
Hat jemand ähnliche Erfahrungen mit Firefox bei großen Hero-Bildern oder eine Idee, wie man die Animation flüssiger bekommt?
Das Ruckeln ist nur unter Linux mit Firefox Browser. Habe den WebRender eingeschaltet, ist besser geworden, aber man sieht noch das es ruckelt,
LG
