Position: Behoben, dass das Off-Canvas-Menü in Chrome und IE nicht gut abgespielt wird

Lesezeit: 7 Minuten

Benutzer-Avatar
Simon Heuter

Was ist beabsichtigt

Ich benutze eine Off-Canvas-Menü mit CSS und JavaScript. Das Off-Canvas-Menü funktioniert wie vorgesehen. Ich möchte ein Seitenleistenmenü, das sich links vom Bildschirm befindet und sich mitbewegt, wenn das Menü ausgelöst wird. Die Idee ist, einen Menü-Trigger zu haben, der 100 Pixel breit ist und eine Höhe von 100 % hat und immer links vom Bildschirm ist. Bei der absoluten Position hatte ich in allen Browsern Probleme mit der Höhe, bei der Verwendung von Firefox mit fester Position funktioniert es einwandfrei, es treten jedoch die unten genannten Probleme auf.

Fehler

Firefox-Probleme: Keine, soweit ich das beurteilen kann.

Chrome-Probleme: Nachdem Sie ein paar Pixel nach unten gescrollt haben, dehnt der Sidebar-Menü-Trigger nicht die gesamte Seite.

Internet Explorer: Die Seitenleiste scheint vollständig zu verschwinden, wenn das Seitenleistenmenü ausgelöst wird.

jsFiddle

Da mein Code sowohl HTML, CSS als auch JavaScript enthält, habe ich a jsFiddle. Bitte beachten Sie, dass das Problem meines Wissens nur bei Chrome und Internet Explorer auftritt. Sie können das Problem replizieren, indem Sie die Seite ein wenig nach unten scrollen und dann auf die Menüschaltfläche auf der linken Seite klicken.

Screenshots

Probleme mit dem Off-Canvas-Menü

HINWEIS WORTHY HTML CODE (Vollständiger Code in Fiddle)

<div id="sbContainer" class="sbContainer">
    <div class="sbPush">
        <header class="contain-to-grid sbMenu sbFX">
            <nav class="top-bar" data-topbar>
                <ul class="title-area show-for-small-only"><!--SITENAME--></ul>
                <section class="top-bar-section"><!--LINKS--></section>
            </nav>
        </header>
        <div class="sbContent-one">
            <div class="sbContent-two">
                <div class="sbMenuTrigger" data-effect="sbFX"><!--SIDEBAR TRIGGER--></div>
                <div class="sbMainContent" role="document"><!--PAGE CONTENT--></div>
            </div>
        </div>
    </div>
</div>

HINWEIS WORTHY CSS CODE (Vollständiger Code in Fiddle)

html, body, .sbContainer, .sbPush, .sbContent-one {
    height:100%
}
.sbContent-one {
    overflow-x:hidden;
    background:#fff;
    position:relative
}
.sbContainer {
    position:relative;
    overflow:hidden
}
.sbPush {
    position:relative;
    left:0;
    z-index:99;
    height:100%;
    -webkit-transition:-webkit-transform .5s;
    transition:transform .5s
}
.sbPush::after {
    position:absolute;
    top:0;
    right:0;
    width:0;
    height:0;
    background:rgba(0,0,0,0.2);
    content:'';
    opacity:0;
    -webkit-transition:opacity 0.5s,width .1s 0.5s,height .1s .5s;
    transition:opacity 0.5s,width .1s 0.5s,height .1s .5s
}
.sbMenu-open .sbPush::after {
    width:100%;
    height:100%;
    opacity:1;
    -webkit-transition:opacity .5s;
    transition:opacity .5s
}
.sbMenu {
    position:absolute;
    top:0;
    left:0;
    z-index:100;
    visibility:hidden;
    width:244px;
    height:100%;
    background:#872734;
    -webkit-transition:all .5s;
    transition:all .5s
}
.sbMenu::after {
    position:absolute;
    top:0;
    right:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.2);
    content:'';
    opacity:1;
    -webkit-transition:opacity .5s;
    transition:opacity .5s
}
.sbMenu-open .sbMenu::after {
    width:0;
    height:0;
    opacity:0;
    -webkit-transition:opacity 0.5s,width .1s 0.5s,height .1s .5s;
    transition:opacity 0.5s,width .1s 0.5s,height .1s .5s
}
.sbFX.sbMenu-open .sbPush {
    -webkit-transform:translate3d(300px,0,0);
    transform:translate3d(244px,0,0)
}
.sbFX.sbMenu {
    -webkit-transform:translate3d(-100%,0,0);
    transform:translate3d(-100%,0,0)
}
.sbFX.sbMenu-open .sbFX.sbMenu {
    visibility:visible;
    -webkit-transition:-webkit-transform .5s;
    transition:transform .5s
}
.sbFX.sbMenu::after {
    display:none
}
.no-csstransforms3d .sbPush,.no-js .sbPush {
    padding-left:244px
}
.sbMenuTrigger {
    background-color:#b23445;
    cursor:pointer;
    height:100%;
    width:100px;
    position:fixed;
    left:0;
    top:0
}
.sbMainContent {
    margin-left:100px;
    width:calc(100% - 100px);
    top:0;
    padding-top:50px;
    position:absolute;
    height:100%
}

  • Screenshots und Geige stimmen nicht überein … nicht sicher, was die Geige demonstriert

    – Populus

    14. April 2015 um 15:34 Uhr

  • Screenshots stammen von einer Entwicklungsseite. Wenn Sie Fiddle entweder in Chrome oder Internet Explorer laden, können Sie dieselben Probleme replizieren, die in Screenshots angezeigt werden.

    – Simon Heuter

    14. April 2015 um 15:35 Uhr


  • Chrome war für mich in Ordnung, aber ich bin unter Linux, daher kann es zu unterschiedlichen Ergebnissen kommen

    – Populus

    14. April 2015 um 15:36 Uhr

  • Hast du nach unten gescrollt und dann das Menü erweitert?

    – Simon Heuter

    14. April 2015 um 15:37 Uhr

Benutzer-Avatar
Josh Crozier

Hier ist eine Problemumgehung, die nur sehr wenige Änderungen erfordert.

Es funktioniert konsistent in den neuesten Versionen von FF, Chrome und IE11/10.

Aktualisiertes Beispiel

.sbContent-one {
  overflow: visible;       /* Or remove overflow-x: hidden */
}
.sbMainContent {
  overflow-x: hidden;
}
.sbMenuTrigger {
  position: static;        /* Or remove position: fixed */
}

Der einfachste Weg, das Problem in Chrome zu lösen, besteht darin, einfach die zu verschieben overflow aus .sbContent-one zu .sbMainContent. Dabei können Sie nicht wirklich über die hinaus scrollen .sbMenuTrigger Element (das das Problem behebt) seit .sbMainContent ist ein Geschwisterelement.

Derzeit gibt es viele Ungereimtheiten über Browser um wie fixed Elemente werden relativ zu Elementen positioniert, die sind transformiert mit translate3d. Das Problem im IE war darauf zurückzuführen, dass fixed Elemente werden relativ zum Fenster positioniert, ohne die transformierten Elemente zu übernehmen translate3d berücksichtigen. Um dies zu lösen, vermeiden Sie die feste Positionierung vollständig und fügen Sie das Element hinzu .sbMenuTrigger durch Entfernen wieder in den normalen Fluss zurück position: fixed (oder das überschreiben mit position: static, der Standard). Dabei erweitert sich die Seitenleiste wie erwartet.

Mit anderen Worten:

  • Entfernen overflow-x: hidden aus .sbContent-one (oder überschreibe es mit overflow: visible).
  • Hinzufügen overflow-x: hidden zu .sbMainContent.
  • Entfernen position: fixed aus .sbMenuTrigger (oder überschreibe es mit position: static).

  • Danke an alle für funktionierende Lösungen. Ich habe Josh die Belohnung gewährt, weil ich glaube, dass die Lösung meinen Anforderungen entspricht, und gleichzeitig den Grund erklärt, warum sie nicht funktioniert. Plus 1 für alle anderen! Danke!

    – Simon Heuter

    23. April 2015 um 14:55 Uhr

  • @bybe Danke. Ich habe gerade ein weiteres Kopfgeld gestartet, das Joe zugesprochen wird, da seine Lösung auch funktioniert hat.

    – Josh Crozier

    23. April 2015 um 15:01 Uhr

  • Hey nochmal, ich habe es gerade auf Safari 6 und 7 getestet, anscheinend bekommt das Menü margin:56px von irgendwoher … die Verwendung von .sbContainer margin-left 56px löst das Problem, wenn das Menü geöffnet ist, bricht es aber, wenn es geschlossen ist. Eeek! Warum können Browser nicht gleich sein 😛

    – Simon Heuter

    3. Mai 2015 um 9:38 Uhr


Benutzer-Avatar
José Ch.

Hier ist meine Lösung für dein Problem. Getestet auf 3 großen Browsern und es funktioniert gut!

siehe Geige

Werfen Sie einen Blick auf meine Änderungen an den folgenden Klassen:

  • Position relativ entfernen von .sbContent-one
  • Höhe hinzufügen: 100% zu .sbContent-two (neue Regel)
  • große Veränderungen an .sbMainContent
  • Position absolut für .sbMenuTrigger

Die Hauptprobleme waren:

  1. unnötig Position relative und absolute Position aus .sbContent-one und .sbMainContent.
  2. position fixed ist relativ zum Fenster, daher variiert sein Verhalten je nach Browser, wenn Sie das Element übersetzen.

  • Ich bin mir nicht sicher, warum jemand dies abgelehnt hat. Ich habe eine positive Bewertung von 1+. Es funktioniert meistens, obwohl es jetzt eine kleine Einschränkung gibt, da Sie es entfernt haben position: relative.. wenn man vergleicht Ihr Vollbildbeispiel GEGEN die Beispiel für den Vollbildmodus von OPSie werden sehen, dass die Positionierung des Textes “Scrollen Sie nach unten und erweitern Sie das Menü, um das Problem zu sehen” ist jetzt aus. Ich bin mir ziemlich sicher, dass das OP diese relative Positionierung beibehalten möchte.

    – Josh Crozier

    17. April 2015 um 2:40 Uhr


  • @JoshCrozier Das liegt am JS-Fiddle-Header und iframe. Wenn Sie es schaffen, eine saubere Version zu öffnen, würden Sie sehen, dass es perfekt funktioniert. Außerdem habe ich vorgeschlagen, einige Stile zu bereinigen, die ich für unnötig halte, weshalb ich weitere Änderungen vorgenommen habe.

    – José Ch.

    17. April 2015 um 2:55 Uhr


Benutzer-Avatar
Romuleald

Ich habe es geschafft, dass es auf dem letzten Chrome/IE11 funktioniert.

jsfiddle

Ich habe die verschoben

        <div class="sbMenuTrigger" data-effect="sbFX">
            <div class="sbMenuIcon">
                <div class="sbMenuIconBackground"></div>
                <div class="sbMenuIconOverlay"></div>
            </div>
            <div class="sbMenuLogo">
                <div class="sbMenuLogoBackground"></div>
                <div class="sbMenuLogoOverlay"></div>
            </div>
        </div>

Am Ende von <header> -Tag, also wurde das CSS zu:

.sbMenuTrigger {
    background-color:#b23445;
    cursor:pointer;
    width:100px;
    position:absolute;
    right:-100px;
    top:0;
    bottom: 0;
}

Die Position Fixed + Transform sind nicht immer bei allen Browsern willkommen.

  • Löst das Problem, mag aber die Idee, negative Margins oder Positionen zu verwenden, nicht. Außerdem sind Sie sich nicht sicher, was Sie getan haben, aber das Menü lässt sich auf Ihrer Fiddle nicht schließen.

    – Simon Heuter

    23. April 2015 um 16:44 Uhr

  • Negativer Rand ist kein Problem, wenn alles in der Breite fixiert ist, denn das Schließen klappt nicht, ist es vielleicht ein Problem durch das Verschieben von HTML?

    – Romuleald

    23. April 2015 um 19:06 Uhr

1216390cookie-checkPosition: Behoben, dass das Off-Canvas-Menü in Chrome und IE nicht gut abgespielt wird

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy