Posisi yang diperbaiki tidak berfungsi saat menggunakan -webkit-transform

Saya menggunakan -webkit-transform (dan -moz-transform / -o-transform) untuk memutar div. Juga memiliki posisi tetap ditambahkan sehingga div turun dengan pengguna.

Di Firefox berfungsi dengan baik, tetapi di browser berbasis webkit itu rusak. Setelah menggunakan -webkit-transform, posisi yang diperbaiki tidak berfungsi lagi! Bagaimana mungkin?

Setelah beberapa penelitian, telah ada laporan bug di situs web Chromium tentang masalah ini, sejauh ini browser Webkit tidak dapat membuat dua efek ini bersamaan pada saat yang sama.

Saya menyarankan menambahkan beberapa Webkit hanya CSS ke stylesheet Anda dan menjadikan div yang diubah gambar dan menggunakannya sebagai latar belakang.

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

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

Jadi untuk sekarang Anda harus melakukannya dengan cara lama, sampai browser Webkit mengejar FF.

EDIT: Sampai 10/24/2012 bug belum terselesaikan.

Ini tampaknya bukan bug, tetapi aspek dari spesifikasi karena dua efek yang membutuhkan sistem koordinat dan susun pesanan yang terpisah. Seperti yang dijelaskan dalam jawaban ini .

The CSS Mentransformasi spek menjelaskan perilaku ini. Elemen dengan transformasi bertindak sebagai blok yang berisi untuk keturunan posisi tetap, jadi posisi: tetap di bawah sesuatu dengan transformasi tidak lagi memiliki perilaku tetap.

Mereka bekerja ketika diterapkan pada elemen yang sama; elemen akan diposisikan sebagai tetap, dan kemudian diubah.

Bagi siapa pun yang menemukan gambar latar belakangnya menghilang di Chrome karena masalah yang sama dengan lampiran latar belakang: diperbaiki; - ini solusi saya:

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

    });
}  

Sesuatu (agak sedikit gila) yang berhasil bagi saya adalah position:stickysebagai gantinya:

.fixed {
     position: sticky;
}

Agustus 2016 dan posisi tetap & animasi / transformasi masih menjadi masalah. Satu-satunya solusi yang bekerja untuk saya - adalah membuat animasi untuk elemen anak yang membutuhkan waktu lebih lama.

Sebenarnya saya menemukan cara lain untuk memperbaiki "bug" ini:

Saya memiliki elemen penampung yang menampung halaman dengan animasi CSS3. Ketika halaman menyelesaikan animasi, properti css3 memiliki nilai: transform: translate (0,0) ;. Jadi, saya baru saja menghapus baris ini, dan semuanya berfungsi sebagaimana mestinya - position: fix ditampilkan dengan benar. Ketika kelas css diterapkan untuk menerjemahkan halaman, menerjemahkan properti ditambahkan dan animasi css3 bekerja dengan baik.

Contoh:

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

pada proyek phonegap saya, transformasi webkit -webkit-transform: translateZ (0); bekerja seperti pesona. Itu sudah bekerja di chrome dan safari bukan browser ponsel. juga ada satu masalah lagi yaitu DIV WRAPPER tidak selesai dalam beberapa kasus. kami menerapkan kelas yang jelas dalam hal DIV mengambang.

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

Mungkin karena bug di Chrome karena saya tidak bisa meniru di Safari atau Firefox, tetapi ini berfungsi di Chrome 40.0.2214.111 http://jsbin.com/hacame/1/edit?html,css ,

Ini adalah struktur yang sangat khusus sehingga tidak berarti perbaikan css satu-baris yang berlaku secara universal, tapi mungkin seseorang dapat bermain-main dengannya untuk membuatnya bekerja di Safari dan Firefox.

Saya mengalami masalah ini ketika mencoba menerapkan reaksi warna dengan reaksi-swipeable-views (rsw). Masalahnya bagi saya adalah bahwa rsw berlaku translate(-100%, 0)untuk panel tab yang memecah div posisi tetap default ditambahkan ke layar penuh yang ketika diklik menutup model color picker.

Bagi saya solusinya adalah menerapkan transformasi sebaliknya ke elemen tetap (dalam hal ini translate(100%, 0)yang memperbaiki masalah saya. Saya tidak yakin apakah ini berguna dalam kasus lain tetapi saya pikir saya akan tetap berbagi.

Berikut adalah contoh yang menunjukkan apa yang telah saya jelaskan di atas:

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

Menambahkan -webkit-transformke elemen tetap memecahkan masalah bagi saya.

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

Inilah yang berfungsi untuk saya di semua browser dan perangkat seluler yang diuji (Chrome, IE, Firefox, Safari, iPad, iphone 5 dan 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%);
}

posisi tetap suatu elemen rusak jika Anda menerapkan transformasi pada leluhur mana pun.

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

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

Jika Anda dapat menggunakan javascript sebagai opsi, ini bisa menjadi solusi untuk memposisikan posisi elemen tetap yang relavtive ke jendela saat ada di dalam elemen yang diubah:

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

Memang Anda juga harus menyesuaikan ketinggian dan lebar Anda karena fixedElakan menghitungnya berdasarkan pada wadah itu. Itu tergantung pada kasus penggunaan Anda, tetapi ini akan memungkinkan Anda untuk secara terduga mengatur posisi sesuatu tetap, terlepas dari wadahnya.

Tambahkan kelas dinamis sementara elemennya berubah. $('#elementId').addClass('transformed'). Kemudian lanjutkan untuk mendeklarasikan dalam css,

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

kemudian

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

kemudian

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

Posisi sekarang: diperbaiki ketika diberikan dengan nilai properti indeks atas dan z pada elemen anak berfungsi dengan baik dan tetap tetap sampai elemen induk berubah. Ketika transformasi dikembalikan, elemen anak muncul sebagai diperbaiki lagi. Ini akan memudahkan situasi jika Anda benar-benar menggunakan bilah sisi navigasi yang beralih terbuka dan ditutup dengan klik, dan Anda memiliki tab-set yang harus tetap lengket saat Anda menggulir ke bawah halaman.

dalam kasus saya, saya tahu bahwa kami tidak dapat menggunakan transform: translateX () sebelum transform: translateY (). jika kami ingin menggunakan keduanya, kami harus menggunakan transform: translate (,).

Harap jangan memilih, karena ini bukan jawaban yang tepat, tetapi dapat membantu seseorang karena ini cara cepat hanya untuk mematikan transformasi. Jika Anda benar-benar tidak memerlukan transformasi pada induk dan Anda ingin posisi tetap Anda berfungsi lagi:

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