Warum nicht translateX erwartungsgemäß für Feste Elemente auf IE9, IE10 und IE11?

Ich versuche, um die folgenden im IE9, IE10 und IE11 (funktioniert auch einwandfrei unter Chrome und FF):

Im mobilen Modus, ich habe einen main #container wrapper, der hält das ganze Website-Inhalte und eine nav-Seite Menü-div-Element, welches innerhalb der #container (nicht ausgezogen ist, btw), ist aber nicht sichtbar und versteckt ist off-screen. Wenn ein Benutzer auf ein Menü öffnen Umschalten-Taste, schieben Sie die #container auf der rechten Seite, enthüllt die nav-Seite Menü-div direkt positioniert, um seiner linken Seite. Die "Schiebe" ist passiert mit translateX, die zugewiesen bekommt, sobald das "offene" - Klasse angewendet wird, um es über den Knebel. In der IEs, ich bin immer der animation Teil, wie erwartet, aber ohne eine sichtbare Seite nav (leeren Raum).

#container {
    height: 100%;
    position: relative;
    transition: transform ease .5s;
    width: 100%;
}
#container.open {
    position: fixed;
    transform: translateX(300px);
}

#nav-side-menu {
    left: -300px;
    height: 100%;
    overflow: scroll;
    position: fixed;
    top: 0;
    width: 300px;
}

Können Sie einen link zu einer demo? Ich nahm mir die Freiheit zu machen; reflektieren Ihr Szenario genau?
Perfekt! Zeigt das Szenario genau wie beabsichtigt.

InformationsquelleAutor DecafJava | 2015-01-14

13

Das problem hier ist mit dem Einsatz der position: fixed innen ein neues element. Gemäß der Spezifikation ist, wenn mit Fix-positionierten Elementen ...das mit block und gründete die viewport. Es ist eine Debatte , ob Elemente umgewandelt werden sollte, die mit block von festen Nachkommen, aber Internet Explorer nicht derzeit unterstützt diese.

In diesem speziellen Fall könnte man vermeiden, die cross-browser-Komplikationen durch die Vermeidung von CSS-Transformationen zusammen. Stattdessen versuchen Sie, das element mit seitlich über die left Eigenschaft. Unten ist mein markup, die ich glauben, zu einer angemessenen Reflexion von Ihnen:
```
<article>
    <nav>
        <p>This is the navigation portion.</p>
    </nav>
    <section>
        <p>This is the content portion.</p>
    </section>
</article>
```
Wie oben beschrieben, wurde der folgende Ansatz macht Schlüssel verwenden, der einen relativ positionierten container, bewegt von Seite zu Seite durch den übergang (unterstützt seit IE10) die left Eigenschaft. Wir sind auch mit der calc - Funktion (unterstützt seit IE9), um zu bestimmen, besser-Abmessungen und offsets:
```
body {
    margin: 0;
    overflow-x: hidden;
}

article {
    left: -300px;
    position: relative;
    transition: left 2s;
    box-sizing: border-box;
    width: calc(100% + 300px);
    padding: 0 1em 0 calc(300px + 1em);
}

article.open {
    left: 0px;
}

nav {
    position: fixed;
    width: 300px; height: 100%;
    margin: -1em auto auto calc(-300px - 1em);
}
```
Diesem Ansatz ergibt sich ein konsistenter Umgang mit Internet Explorer, Chrome und Firefox. Das Ergebnis kann online eingesehen werden hier: http://jsfiddle.net/jonathansampson/vxntq8b1/
- Vielen Dank für Ihre Antwort. Perfekt macht nun Sinn. Allerdings bin ich nicht in der Lage zu bewegen, der nav, der außerhalb der container, weil die gleiche nav im desktop-Modus verwendet wird, im inneren des Behälters, wie eine normale desktop-nav. Ich bin mit CSS nur zu transformieren, die gleichen desktop-nav in eine Seite nav für mobile. Nette demo btw!
- Wie über die Positionierung der nav absolut, und nicht die Positionierung des übergeordneten Elements auf alle? jsfiddle.net/vxntq8b1/4
- Wenn Sie markup-Anforderungen und-Einschränkungen haben, bitte teilen Sie die in Ihrer Frage oben.
- es gibt keinen Punkt im briefing die Hälfte von dem, was Sie benötigen. Wenn Sie die Fragen nur für die Hälfte, dann das ist ganz richtig, was Sie bekommen sollte.
- Die einzige Einschränkung ist, dass ich mich nicht bewegen kann ist der nav aus dem inneren des Behälters nach außen. Also, leider ist das Geschwister-Idee Strategie nicht anwendbar. 🙁
- Ich ziemlich nah dran so dass es absolute statt fixed, aber das einzige problem ist die Höhe. Es endet, wobei nur etwa 400 Pixel Höhe (Natürliche Gehalt-Höhe) und die Höhe 100% ist nicht eingehalten. Ich will es verbreiten den ganzen Weg nach unten, um die volle browser-Höhe wie damals, als es behoben wurde. Auch, indem er absolut, ich hatte zu entfernen, die overflow: hidden vom Körper.offene Klasse, die ich angewendet hatte (das hatte ich Hinzugefügt, so dass beim nav geöffnet ist, können Benutzer nicht ziehen Sie Ihre Finger um den rest der Seite).
- Ich glaube nicht, dass ich Links aus einer kritischen Stücke.
- Sie können absolute Positionierung, aber Sie brauchen, um sicherzustellen, dass Sie top: 0; bottom: 0; und eine Umhüllung, relativ positioniert. element 100% in der Höhe. Ein gutes Beispiel ist die WordPress-admin-Seite im Menü.
- JonathanSampson und morganFeeney: problem gelöst. Euch vorgeschlagen, die Schlüssel zu nutzen, um die absolute Positionierung statt, und von der Eltern-entfernen der Positionierung (standardmäßig statisch), so dass 100% der Höhe arbeiten können. Auch, unten 0 nötig war, zu. Danke!
- Ich Liebe es, wenn ein plan zusammen kommt. Froh bekamen Sie es das arbeiten.
- Oops, ich meinte @DecafJava
- Ich aktualisiert meine Antwort um ein Konzept, das funktioniert am besten über moderne Browser. Es vermeidet einige der unsicheren Verhalten, das bekommen wir mit transformierten Eltern und festen Nachkommen in einigen Browsern.
- ah, mit der left-Eigenschaft. Dies ist die ursprüngliche route, die ich nahm, aber das team beschlossen, verwenden, verwandeln, stattdessen für die Vorteile von hardware-Beschleunigung. In den meisten Fällen, ich bin sicher, es ist ein solider Ansatz, aber.
- Hardware-Beschleunigung ist nicht wirklich ein Problem hier. Sie verschieben ein element einer Seite-an-Seite 300 Pixel 🙂 mithilfe Von Transformationen, du bist gehen, um zu fördern die transformierten element zu a mit-blog-und sich selbst in eine ziemlich problematische Grenzfälle wie weit das rendering-Modell ist betroffen.
- Guter Punkt. lol. Danke für die Aufklärung, die falsche Wahrnehmung.
- Der Nachteil dieses Ansatzes ist, dass es mehr Arbeit für den browser. Umstellung der left - Eigenschaft wird ausgelöst, layout, Farbe und Komposition. Wenn Sie IE verwenden konnte-Transformation mit festen Elemente platzieren, dann mit dem transformieren-Sie haben nur die Zusammensetzung ändern, ohne neu streichen oder re-layout notwendig. Mehr info auf Leistung Kosten diese Attribute sind im csstriggers.com
- Ja, auf mobile Browser habe ich fand die Leistung von transition: left und ähnliche, arm zu sein. Siehe z.B. hier für einige Diskussionen darüber, warum, und sehen, die Antwort für ein Beispiel mit Mondernizr um eine fall-back für die Browser, die keine Unterstützung CSS3-Transformationen.
InformationsquelleAutor Sampson

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.