Skip to main content
F-LOG-GE

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.

Dies ist ein Archiv meines alten Weblogs, das von Oktober 2006 bis Dezember 2022 als Wordpress-Instanz existierte.