Jeder Browser ist anders …

Bei der Weiterentwicklung des YAML-Frameworks konfrontierte mich Dirk Jesse gestern mit einem ärgerlichen Verhalten von Chrome. Bei einem Off-Canvas-Menü ignorierte dieser geflissentlich die Eigenschaft position:fixed. Nach ein paar Versuchen kam ich zu der Erkenntnis, dass die Entfernung von -webkit-perspective: 1000; das Problem löste. Ein Grund erschloss sich mir nicht. Also recherchierte ich heute Morgen ein wenig und stolperte schon gleich zu Beginn auf eine frustrierende Erkenntnis von Ian Routledge:

The translate3d does have a problem though: it breaks position: fixed in webkit and causes it to render as position absolute. So, if you were creating an off-canvas menu for example and transitioning the whole site, you wouldn’t be able to use anything with position: fixed inside that. I ran into this problem when I had a fixed nav.

Ein anderer Autor geht sogar so weit, alle Transform-Eigenschaften als Übeltäter für das veränderte Verhalten zu identifizieren:

So, it seems that fixed positioned elements will become absolute positioned elements if the container where they are has the -webkit-transform property set to anything different from none.

Mal schauen, welche Erkenntnisse mir noch so entgegenkommen. Gibt es Lösungen von performanten Off-Canvas-Menüs, bei denen der auslösende Button fixiert ist? Will man das überhaupt? Vielleicht ist es ja eine Lösung für ein nicht-existentes Problem. Sowas wie eine wiederverschliessbare Chipstüte.

3 Responses to “Jeder Browser ist anders …”

  1. Tilman sagt:

    Hallo Jens,

    wir hatten das Problem kürzlich auch in zwei Projekten. Bei uns hing das ebenfalls mit 3D-Transforms zusammen, Auslöser war in einem Fall die Property will-change mit einem Wert != „auto“, im anderen Fall auch die Property perspective.

    In beiden Fällen könnte die Ursache die gleiche sein und mit dem Rendering-Kontext der betroffenen Elemente zusammen hängen. Aber da bewege ich mich ehrlich gesagt schon auf das Gebiet des gefährlichen Halbwissens 😉