[mobile menu]codefog » position:fixed und transform

[derRenner]

Hallo,

die Erweiterung formt folgendes Konstrukt

<div class="mobile_menu_wrapper">
       <div id="wrapper" style="transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1); backface-visibility: hidden; transition: transform 500ms ease 0s; left: 0px; will-change: transform;">
              <header id="header" itemscope="" itemtype="http://schema.org/WPHeader"> 

Nun wollte ich <header> position: fixed; mit geben ... klappt aber nicht.
Nach einiger Recherche lese ich immer wieder davon, dass 'fixed' in einem div mit 'transform' nicht funktioniert - in einigen Beiträgen konnte ich von "Lösungsansätzen" lesen, die ich aber bei weitem nicht verstanden, ganz schweigen von umsetzen konnte.

Nun eben mal meine Frage:
ob bereits jemand einen workaround speziell für diesen Fall umsetzen konnten - und falls ja, wie?

Contao 4.4.8

[Doro]

schau mal ob Dir dieser Beitrag von Andreas hilft
https://community.contao.org/de/show...l=1#post452622

[derRenner]

... nein, hilft leider nicht weiter - Danke aber trotzdem.

In Andreas' Beitrag fixiert er das mobile Menu selbst und nicht den <header>
Das Problem stellt die Kombination von 'transform' mit 'position:fixed' dar - und das wird aber bereits im #wrapper via inline-style gesetzt. Und der <header> befindet sich im #wrapper

[derRenner]

workaround

body .mobile_menu_wrapper #wrapper {
	transform: none!important;      
	will-change: content!important;
}

trotz verbleibendem inline-style im #wrapper ist der <header> fixed
klappt somit erst mal - ich werd das nun noch in den verschiedenen Browsern und mobile-devices austesten

[planepix]

Wenn die Option „Off Canvas Effekt” nicht aktiviert wird, bleibt position:fixed; erhalten. Damit kann man leben .

[Flox]

Das hat mit der Problematik zu tun, dass der gesamte #wrapper durch den erwähnten "Off Canvas Effekt" mit Hilfe der CSS-transition manipuliert wird. Dadurch weis wohl position:fixed nicht mehr was zu tun ist.

Genau das Problem habe ich gestern auch gehabt und durch das nicht anhaken des Off Canvas lösen können.