Feste Positionen funktionieren bei Verwendung von -webkit-transform nicht

Ich benutze -webkit-transform (und -moz-transform / -o-transform), um ein div zu drehen. Außerdem wurde eine feste Position hinzugefügt, damit das Div mit dem Benutzer nach unten scrollt.

In Firefox funktioniert es gut, aber in Webkit-basierten Browsern ist es kaputt. Nach der Verwendung der -webkit-Transformation funktioniert die festgelegte Position nicht mehr! Wie ist das möglich?

Nach einigen Recherchen wurde auf der Chromium- Website ein Fehlerbericht zu diesem Problem veröffentlicht. Bisher können Webkit-Browser diese beiden Effekte nicht gleichzeitig rendern.

Ich würde vorschlagen, dass Sie Ihrem Stylesheet nur Webkit-CSS hinzufügen und das transformierte Div zu einem Bild machen und es als Hintergrund verwenden.

@media screen and (-webkit-min-device-pixel-ratio:0) {
  /* Webkit-specific CSS here (Chrome and Safari) */

  #transformed_div {
    /* styles here, background image etc */
  }
}

Im Moment müssen Sie dies also auf die altmodische Weise tun, bis die Webkit-Browser FF einholen.

BEARBEITEN: Bis zum 24.10.2012 wurde der Fehler nicht behoben.

Dies scheint kein Fehler zu sein, sondern ein Aspekt der Spezifikation aufgrund der beiden Effekte, die separate Koordinatensysteme und Stapelreihenfolgen erfordern. Wie in dieser Antwort erklärt .

Die CSS-Transformationsspezifikation erklärt dieses Verhalten. Elemente mit Transformationen fungieren als enthaltender Block für Nachkommen mit fester Position. Position: Fixiert unter etwas mit einer Transformation hat kein festes Verhalten mehr.

Sie funktionieren, wenn sie auf dasselbe Element angewendet werden. Das Element wird als fest positioniert und dann transformiert.

Für alle, die ihre Hintergrundbilder finden, verschwinden sie in Chrome aufgrund des gleichen Problems mit dem Hintergrundanhang: behoben; - das war meine Lösung:

// run js if Chrome is being used
if(navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
    // set background-attachment back to the default of 'scroll'
    $('.imagebg').css('background-attachment', 'scroll');

    // move the background-position according to the div's y position
    $(window).scroll(function(){

        scrollTop = $(window).scrollTop();
        photoTop = $('.imagebg').offset().top;
        distance = (photoTop - scrollTop);
        $('.imagebg').css('background-position', 'center ' + (distance*-1) + 'px');

    });
}  

Etwas (ein bisschen hacky), das für mich funktioniert hat, ist position:stickystattdessen:

.fixed {
     position: sticky;
}

August 2016 und feste Position & Animation / Transformation ist immer noch ein Problem. Die einzige Lösung, die für mich funktioniert hat, war die Erstellung einer Animation für das untergeordnete Element, die länger dauert.

Eigentlich habe ich einen anderen Weg gefunden, um diesen "Fehler" zu beheben:

Ich habe Container-Element, das Seite mit CSS3-Animationen enthält. Wenn die Seite die Animation abgeschlossen hat, hat die Eigenschaft css3 den Wert: transform: translate (0,0);. Also habe ich gerade diese Zeile entfernt und alles hat so funktioniert, wie es sollte - Position: fest wird richtig angezeigt. Wenn die CSS-Klasse zum Übersetzen der Seite angewendet wird, wird die Eigenschaft translate hinzugefügt und die CSS3-Animation funktioniert ebenfalls.

Beispiel:

.page {
     top: 50px;
     position: absolute;
     transition: ease 0.6s all;
     /* -webkit-transform: translate(0, 0); */
     /* transform: translate(0,0); */
 }
 .page.hide {
     -webkit-transform: translate(100%, 0);
     transform: translate(-100%, 0);    
 }

Demo: http://jsfiddle.net/ZWcD9/

in meinem Phonegap-Projekt die Webkit-Transformation -webkit-transform: translateZ (0); Lief wie am Schnürchen. Es funktionierte bereits in Chrome und Safari, nur nicht im mobilen Browser. Es kann auch ein weiteres Problem geben: WRAPPER DIVs sind in einigen Fällen nicht abgeschlossen. Bei schwebenden DIVs wenden wir eine klare Klasse an.

<div class="Clear"></div> .Clear, .Clearfix{clear:both;}

Wahrscheinlich aufgrund eines Fehlers in Chrome, da ich weder in Safari noch in Firefox replizieren kann, aber dies funktioniert in Chrome 40.0.2214.111 http://jsbin.com/hacame/1/edit?html,css,output

Da es sich um eine ganz bestimmte Struktur handelt, handelt es sich keineswegs um ein universell einsetzbares einzeiliges CSS-Update, aber vielleicht kann jemand daran basteln, damit es in Safari und Firefox funktioniert.

Ich hatte dieses Problem beim Versuch, React-Color mit React-Swipeable-Views (rsw) zu implementieren. Das Problem für mich war, dass rsw translate(-100%, 0)auf ein Registerkartenfeld angewendet wird , das die über den Vollbildmodus hinzugefügte Standard- Feststellungsdivision aufhebt, die beim Klicken das Farbauswahlmodell schließt.

Für mich bestand die Lösung darin, die entgegengesetzte Transformation auf das feste Element anzuwenden (in diesem Fall, translate(100%, 0)wodurch mein Problem behoben wurde. Ich bin mir nicht sicher, ob dies in anderen Fällen nützlich ist, dachte aber, ich würde es trotzdem teilen.

Hier ist ein Beispiel, das zeigt, was ich oben beschrieben habe:

https://codepen.io/relativemc/pen/VwweEez

Das Hinzufügen des -webkit-transformzum festen Element hat das Problem für mich gelöst.

.fixed_element {
   -webkit-transform: translateZ(0);
   position: fixed;
   ....
} 

Folgendes funktioniert für mich auf allen getesteten Browsern und Mobilgeräten (Chrome, IE, Firefox, Safari, iPad, iPhone 5 und 6, Android).

img.ui-li-thumb {
    position: absolute;
    left: 1px;
    top: 50%;

    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

Die feste Position eines Elements wird unterbrochen, wenn Sie die Transformation auf einen Vorfahren anwenden.

<div style='position:fixed;-.*-transform:scale(2)'>...</div> //ok

<div style='-.*-transform:scale(2)'>
      <div style='position:fixed'>...</div> // broken
</div>

Wenn Sie Javascript als Option verwenden können, kann dies eine Problemumgehung sein, um ein positionsfestes Element relativ zum Fenster zu positionieren, wenn es sich in einem transformierten Element befindet:

  let fixedEl // some node that you is position 
              // fixed inside of an element that has a transform

  const rect = fixedEl.getBoundingClientRect()
  const distanceFromWindowTop = rect.top
  const distanceFromWindwoLeft = rect.left
  let top = fixedEl.offsetTop
  let left = fixedEl.offsetLeft

  if(distanceFromWindowTop !== relativeTop) {
    top = -distanceFromWindowTop
    fixedEl.style.top = `${top}px`
  }

  if(distanceFromWindowLeft !== relativeLeft) {
    left = -distanceFromWindowLeft
    fixedEl.style.left = `${left}px`
  }

Zugegeben, Sie müssen auch Ihre Höhe und Breite anpassen, da fixedEldie Berechnung anhand des Containers erfolgt. Das hängt von Ihrem Anwendungsfall ab, aber dies ermöglicht es Ihnen, die festgelegte Position vorhersehbar festzulegen, unabhängig vom Container.

Fügen Sie eine dynamische Klasse hinzu, während sich das Element transformiert. $('#elementId').addClass('transformed'). Dann deklarieren Sie in CSS,

.translatX(@x) { 
     -webkit-transform: translateX(@X); 
             transform: translateX(@x);
      //All other subsidaries as -moz-transform, -o-transform and -ms-transform 
}

dann

#elementId { 
      -webkit-transform: none; 
              transform: none;
}

dann

.transformed {
    #elementId { 
        .translateX(@neededValue);
    }
}

Jetzt Position: Fest, wenn ein Top- und ein Z-Index-Eigenschaftswert für ein untergeordnetes Element bereitgestellt werden. Funktioniert einwandfrei und bleibt fest, bis sich das übergeordnete Element transformiert. Wenn die Umwandlung zurückgesetzt wird, wird das untergeordnete Element wieder als fest angezeigt. Dies sollte die Situation verschlechtern, wenn Sie tatsächlich eine Navigationsseitenleiste verwenden, die beim Klicken um- und geschlossen werden kann, und Sie haben eine Registerkarte, die beim Scrollen auf der Seite klebrig bleiben sollte.

In meinem Fall habe ich herausgefunden, dass wir transform: translateX () nicht vor transform: translateY () verwenden können. Wenn wir beide verwenden möchten, sollten wir transform: translate (,) verwenden.

Bitte stimmen Sie nicht ab, da dies keine genaue Antwort ist, sondern jemandem helfen könnte, da dies ein schneller Weg ist, um die Transformation auszuschalten. Wenn Sie die Transformation für das übergeordnete Element wirklich nicht benötigen und möchten, dass Ihre feste Position wieder funktioniert:

#element_with_transform {
  -webkit-transform: none;
  transform: none;
}