'transform3d' nie działa z pozycją: Stałe Dzieci

Miałem migotanie na mojej naprawionej górnej nawigacji, gdy elementy na stronie używały transformacji, następujące zastosowanie do mojej górnej nawigacji rozwiązało problem ze skokiem/migotaniem:

#fixedTopNav {
    position: fixed;
    top: 0;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

Dzięki tej odpowiedzi na SO

Jak zasugerował Bradoergo, po prostu pobierz okno scrollTop i dodaj go do pozycji absolutnej na górze, jak:

function fix_scroll() {
  var s = $(window).scrollTop();
  var fixedTitle = $('#fixedContainer');
  fixedTitle.css('position','absolute');
  fixedTitle.css('top',s + 'px');
}fix_scroll();

$(window).on('scroll',fix_scroll);

W Firefoksie i Safari możesz używać position: sticky; zamiast position: fixed;, ale nie będzie to działać w innych przeglądarkach. Do tego potrzebujesz javascript.

Moim zdaniem, najlepszą metodą radzenia sobie z tym jest zastosowanie tego samego translate, ale złamanie dzieci, które muszą być naprawione z ich elementu nadrzędnego (przetłumaczonego); a następnie zastosowanie translate do div wewnątrz opakowania position: fixed.

Wyniki wyglądają mniej więcej tak (w Twoim przypadku):

<div style='position:relative; border: 1px solid #5511FF; 
            -webkit-transform:translate3d(0px, 20px , 0px); 
            height: 100px; width: 200px;'> 

</div>
<div style='position: fixed; top: 0px; 
            box-shadow: 3px 3px 3px #333; 
            height: 20px; left: 0px;'>
    <div style='-webkit-transform:translate3d(0px, 20px, 0px);'>
        Inner block
    </div>
</div>

JSFiddle: https://jsfiddle.net/hju4nws1/

Chociaż może to nie być idealne dla niektórych przypadków użycia, zazwyczaj jeśli naprawiasz div, prawdopodobnie nie dbasz o to jaki element jest jego rodzicem / gdzie spada w drzewie dziedziczenia w Twoim DOM i wydaje się rozwiązać większość bólu głowy - jednocześnie pozwalając zarówno translate, jak i position: fixed żyć w (względnej) harmonii.

Natknąłem się na ten sam problem. Jedyną różnicą jest to, że mój element z 'position: fixed' miał swoje właściwości stylu 'top' I 'left' ustawione w js. Więc udało mi się zastosować poprawkę:

var oRect = oElement.getBoundingClientRect();

ORect obiekt będzie zawierałrzeczywiste (względem portu widoku) współrzędne górne i lewe. Więc możesz dostosować swój rzeczywisty oElement.styl.top i oElement.styl./ align = "left" /

Mam pasek boczny OFF canvas, który używa -webkit-transform: translate3d. to uniemożliwiało mi umieszczenie stałej stopki na stronie. Rozwiązałem ten problem, kierując klasę na stronie html, która jest dodawana do tagu przy inicjalizacji paska bocznego, a następnie pisząc kwalifikator css: not do stanu " - webkit-transform: none;" do tagu html, gdy ta klasa nie jest obecna na tagu html. Mam nadzieję, że to pomoże komuś tam z tym samym problemem!

Spróbuj zastosować odwrotną transformację do elementu potomnego:

<div style='position:relative; border: 1px solid #5511FF; 
            -webkit-transform:translate3d(0px, 20px , 0px); 
            height: 100px; width: 200px;'> 
    <div style='position: fixed; top: 0px; 
                -webkit-transform:translate3d(-100%, 0px , 0px); 
                box-shadow: 3px 3px 3px #333; 
                height: 20px; left: 0px;'>
        Inner block
    </div>
</div>

Dodaj klasę dynamiczną podczas transformacji elementu.$('#elementId').addClass('transformed'). Następnie przejdź do zadeklarowania w css,

.translat3d(@x, @y, @z) { 
     -webkit-transform: translate3d(@X, @y, @z); 
             transform: translate3d(@x, @y, @z);
      //All other subsidaries as -moz-transform, -o-transform and -ms-transform 
}

Then

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

Then

.transformed {
    #elementId { 
        .translate3d(0px, 20px, 0px);
    }
}

Teraz position: fixed gdy są dostarczane z top i z-index wartości właściwości elementu potomnego działają poprawnie i pozostają stałe, dopóki element nadrzędny nie zmieni się. Gdy transformacja zostanie cofnięta, element potomny zostanie ponownie naprawiony. Powinno to złagodzić sytuację, jeśli faktycznie używasz paska bocznego nawigacji, który przełącza otwieranie i zamykanie na Kliknij, a masz zestaw zakładek, który powinien pozostać lepki podczas przewijania strony w dół.

Jednym ze sposobów radzenia sobie z tym jest zastosowanie tej samej transformacji do elementu stałego:

<br>
<div style='position:relative; border: 1px solid #5511FF; 
            -webkit-transform:translate3d(0px, 20px , 0px); 
            height: 100px; width: 200px;'> 
    <div style='position: fixed; top: 0px; 
                -webkit-transform:translate3d(0px, 20px , 0px); 
                box-shadow: 3px 3px 3px #333; 
                height: 20px; left: 0px;'>
        Inner block
    </div>
</div>