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.
22. Mai 2015 um 22:48 Uhr
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 😉
27. Mai 2015 um 14:34 Uhr
Wow, ich weiß gar nicht was ich sagen soll. Genau das ist mir gestern auch erst aufgefallen. Bin aber noch nicht dazu gekommen dazu zu recherchieren. Danke dafür! 🙂
2. Juni 2015 um 18:25 Uhr
Hi,
Nachtrag mit Quelle: https://css-tricks.com/be-careful-with-will-change/