v4.1.x Malibu Warenkorb Overlay - Fehlerhaft auf iPhones

Thema wurde von Anonymous, 31. August 2020 erstellt.

  1. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    14. Juni 2018
    Beiträge:
    1.551
    Danke erhalten:
    228
    Danke vergeben:
    1.001
    Hallo Leute
    Folgender Bug kann wohl nur an einem Handy reproduziert werden. Den PC Browser auf Mobile stellen genügt nicht um es zu reproduzieren. Grund ist wohl die Menü Leiste, unten bei Apples iPhone, im Safari, Firefox und Chrome Browser.

    Bugbeschreibung:
    Wenn man nicht scrollt und einfach den Warenkorb Overlay öffnet ist alles ok! Unten wird auch die Graue Menü Leiste von Safari angezeigt.
    (Bild 1)

    Wenn man dagegen bereits auf der Seite gescrollt hat und der Menü Balken unten dann ja automatisch vom Gerät ausgeblendet wird und man dann den Warenkorb Overlay öffnet, hat man eine hässliche weisse Stelle bzw. die Seite im Hintergrund scheint halt voll durch - das Overlay setzt an der Stelle einfach aus. Diese wäre ja auch eigentlich von dem Handy Menü überdeckt, würde es beim scrollen nicht automatisch ausblenden.
    (Bild 2)

    Lässt sich ohne Probleme auf einem iPhone XS im Gambio Malibu Testshop als auch bei mir im Live Shop sowie im Beta 4.2 Testshop sofort reproduzieren.


    EDIT: Es betrifft auch Firefox und Google Chrome auf einem Mobiltelefon!
    Diese beiden Browser arbeiten ja auch mit den unteren Menübalken die nach dem ersten scrollen automatisch ausgeblendet werden! Also jeder Mobile Browser ist von diesem Bug betroffen :(
     

    Anhänge:

  2. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    14. Juni 2018
    Beiträge:
    1.551
    Danke erhalten:
    228
    Danke vergeben:
    1.001
    Jemand vielleicht ne Idee für einen schnellen Fix?
    Habe bereits mit dem CSS rumgespielt aber ich konnte leider den Fehler nicht beheben, bin aber auch weit vom CSS Profi entfernt :)

    Denke mit diesem Code steuert man das Element...

    Code:
    #offcanvas-cart-overlay {
        position: fixed;
        z-index: 2001;
        display: none;
        background: rgba(0, 0, 0, .8);
        opacity: 0;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        -webkit-transition: 500ms ease all;
        -o-transition: 500ms ease all;
        transition: 500ms ease all;
    }