Beiträge von apollo_13

  • Hero Bild

    Ja genau das Bild ist 3840x600. Es wird immer die breite zugeschnitten je zu Auflösung bei mir ist es ein 4K Monitor

    Es hat viel mehr geruckelt darum habe ich das auf meiner Seite

    WebRenderer Firefox - Der Bergsteiger
    Flüssige Animationen für beste Darstellung Firefox ist ein hervorragender Browser – aber standardmäßig ist die moderne GPU-Rendering-Engine...
    www.derbergsteiger.com

  • Hero Bild

    Hab es überprüft und das Bild hat nur 850KB. Wie ich schon geschrieben habe das passiert nur unter Linux mir Firefox Browser, unter Windows mit Firefox passiert das nicht. Auch mit anderen Browsern wie Chronium oder Brave ist der Übergang normal.

  • Hero Bild

    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


    Der Bergsteiger - Begleiter für Bergabenteuer

  • Text Box

    Danke für die Antworten,

    aber ich habe es nachvollzogen, warum ich diese Textbox bekomme. Ich hatte das Add-on "Webseiten übersetzen" installiert und dieses Add-on hat den Text zusätzlich in eine Textbox gepackt. Jetzt funktioniert es, wie es sollte.

    LG