'transform3d' tidak bekerja dengan posisi: anak tetap

Saya memiliki situasi di mana, dalam keadaan CSS normal, div tetap akan diposisikan tepat di tempat yang ditentukan ( top:0px, left:0px).

Ini tampaknya tidak dihargai jika saya memiliki orang tua yang memiliki transformasi translate3d. Apakah saya tidak melihat sesuatu? Saya telah mencoba webkit lain seperti gaya dan mengubah opsi asal tetapi tidak berhasil.

Saya telah melampirkan JSFiddle dengan contoh di mana saya mengharapkan kotak kuning berada di sudut atas halaman daripada di dalam elemen kontainer.

Anda dapat menemukan di bawah versi biola yang disederhanakan:

#outer {
    position:relative; 
    -webkit-transform:translate3d(0px, 20px , 0px); 
    height: 300px; 
    border: 1px solid #5511FF; 
    padding: 10px;
    background: rgba(100,180,250, .8); 
    width: 80%;
}
#middle{
    position:relative; 
    border: 1px dotted #445511; 
    height: 300px; 
    padding: 5px;
    background: rgba(250,10,255, .6);
}
#inner {
    position: fixed; 
    top: 0px;
    box-shadow: 3px 3px 3px #333; 
    height: 20px; 
    left: 0px;
    background: rgba(200,180,80, .8); 
    margin: 5px; 
    padding: 5px;
}

<div id="container">
    Blue: Outer, <br>
    Purple: Middle<br>
    Yellow: Inner<br>
    <div id="outer"> 
        <div id="middle">
            <div id="inner">
                Inner block
            </div>
        </div>
    </div>
</div>

Bagaimana cara membuat translate3d berfungsi dengan anak-anak dengan posisi tetap?

Ini karena transformmembuat sistem koordinat lokal baru, sesuai spesifikasi W3C :

Dalam namespace HTML, nilai apa pun selain nonehasil transformasi dalam pembuatan konteks bertumpuk dan blok yang memuat. Objek bertindak sebagai blok penampung untuk turunan yang diposisikan tetap.

Artinya, pemosisian tetap menjadi tetap ke elemen yang diubah, bukan area pandang.

Saat ini tidak ada solusi yang saya sadari.

Hal ini juga didokumentasikan di artikel Eric Meyer: Un-fixing Fixed Elements with CSS Transforms .

Saya mengalami kedipan pada navigasi atas tetap saya ketika item di halaman menggunakan transformasi, hal berikut ini diterapkan pada navigasi teratas saya menyelesaikan masalah melompat / berkedip:

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

Berkat jawaban ini di SO

Seperti yang disarankan Bradoergo, dapatkan jendela scrollTopdan tambahkan ke posisi absolut atas seperti:

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);

Ini berhasil untuk saya.

Di Firefox dan Safari Anda dapat menggunakan position: sticky;bukannya position: fixed;tapi itu tidak akan bekerja di browser lain. Untuk itu Anda membutuhkan javascript.

Menurut pendapat saya, metode terbaik untuk mengatasi ini adalah dengan menerapkan terjemahan yang sama, tetapi hancurkan anak-anak yang perlu diperbaiki dari elemen induknya (diterjemahkan); lalu terapkan terjemahan ke div di dalam position: fixedpembungkus.

Hasilnya terlihat seperti ini (dalam kasus Anda):

<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/

Meskipun ini mungkin tidak ideal untuk beberapa kasus penggunaan, biasanya jika Anda memperbaiki div, Anda mungkin tidak terlalu peduli tentang elemen apa yang menjadi induknya / di mana ia berada di pohon warisan di DOM Anda, dan tampaknya menyelesaikan sebagian besar masalah - sambil tetap membiarkan keduanya translatedan position: fixedhidup dalam harmoni (relatif).

Saya mengalami masalah yang sama. Satu-satunya perbedaan adalah bahwa elemen saya dengan 'position: fixed' memiliki properti gaya 'top' dan 'left' yang disetel dari JS. Jadi saya bisa menerapkan perbaikan:

var oRect = oElement.getBoundingClientRect();

Objek oRect akan berisi koordinat kiri dan atas yang nyata (relatif terhadap port tampilan). Jadi, Anda dapat menyesuaikan properti oElement.style.top dan oElement.style.left Anda yang sebenarnya.

Saya memiliki sidebar di luar kanvas yang menggunakan -webkit-transform: translate3d. Ini mencegah saya menempatkan footer tetap di halaman. Saya menyelesaikan masalah dengan menargetkan kelas pada halaman html yang ditambahkan ke tag pada inisialisasi sidebar dan kemudian menulis css: not qualifier untuk menyatakan "-webkit-transform: none;" ke tag html ketika kelas itu tidak ada di tag html. Semoga ini membantu seseorang di luar sana dengan masalah yang sama ini!

Coba terapkan transformasi berlawanan ke elemen anak:

<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>

Tambahkan kelas dinamis saat elemen bertransformasi. $('#elementId').addClass('transformed'). Lalu lanjutkan dengan mendeklarasikan di 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 
}

kemudian

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

kemudian

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

Sekarang position: fixedketika diberikan nilai properti topdan z-indexpada elemen anak hanya berfungsi dengan baik dan tetap diperbaiki sampai elemen induk berubah. Saat transformasi dikembalikan, elemen turunan akan muncul sebagai diperbaiki lagi. Ini akan memudahkan situasi jika Anda benar-benar menggunakan bilah sisi navigasi yang membuka dan menutup dengan sekali klik, dan Anda memiliki tab-set yang harus tetap melekat saat Anda menggulir ke bawah halaman.

Salah satu cara untuk mengatasinya adalah dengan menerapkan transformasi yang sama ke elemen tetap:

<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>