Posisi yang diperbaiki tidak berfungsi saat menggunakan -webkit-transform


155

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?


4
Halaman demo sering membantu orang menjawab pertanyaan - jsbin.com memungkinkan Anda membuat halaman sementara untuk menggambarkan masalah jika Anda tidak ingin menautkan ke situs Anda.
Rich Bradshaw

jsfiddle.net adalah contoh bagus lain dari tempat penyuntingan sementara.
Kyle

@Rich Bradshaw jsbin.com sangat bagus. Tidak tahu sampai sekarang. Sebagian besar proyek saya dijalankan secara lokal, jadi saya akan menggunakannya lain kali. Tnx
iSenne

7
Tidak berfungsi dengan baik di Firefox sama sekali.
vsync

3
Masih menjadi masalah pada tahun 2017. Tampaknya mereka masih berpegang pada "Ini fitur bukan bug!" argumen ...
Max

Jawaban:


87

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 .


34
Bahkan bertahun-tahun kemudian, masih belum terselesaikan. Sedih sekali.
Amalgovinus

9
Menurut jawaban ini itu bukan bug tetapi bagian dari spesifikasi.
MichaelRushton

15
duduk dan saksikan - saya yakin itu akan hidup sampai ulang tahun ke 10
lzl124631x

29
30 Agustus 2017, log kapten. Kami juga telah menemukan anomali aneh, yang telah dideskripsikan sejak dulu oleh kapten lain. Sebuah solusi masih harus diimplementasikan.
Luoruize

14
Ini adalah bug yang ayah saya ingatkan tentang ayah saya.
danjones_mcr

96

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.


9
Itulah satu-satunya jawaban yang membantu dan benar. Berhenti menerjemahkan elemen induk dan terjemahkan childlements di mana elemen tetap merupakan bagian darinya. Ini biola saya: JSFIDDLE
Falk

2
dan bagaimana jika saya ingin mengubah elemen tetap juga?
Marc

7

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

    });
}  

6

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

.fixed {
     position: sticky;
}

5
pembaruan.html5rocks.com/2012/08/... ah yeah .. tetapi tampaknya belum didukung dengan baik
coiso

1
lengket berbeda. Masalah utama adalah bahwa dengan memperbaiki kita ingin mengabaikan posisi penampung (sangat berguna. Untuk animasi opacity misalnya) Saya tidak percaya bug ini masih ada bertahun-tahun kemudian. Mengerikan.
FlorianB

6

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.


Harap jawab pertanyaan baru. Pertanyaan-pertanyaan itu membutuhkan Anda lebih daripada orang yang mengajukan pertanyaan pada tahun 2010. Mereka pasti sudah memecahkan masalah sekarang, bukan begitu? Juga pertanyaan ini sudah memiliki jawaban yang diterima.
Umair Farooq

5
Nggak! Itu masih masalah ... orang yang mengajukan pertanyaan mungkin telah menemukan solusi lain - tetapi saya menemukan utas ini karena suatu alasan.
defligra

Sesuai keinginan kamu. Saya meninggalkan komentar itu sambil meninjau pertanyaan pertama oleh orang-orang. Dan karena Anda baru bergabung hari ini dan itu adalah jawaban pertama Anda dan juga jawaban yang terlambat, itulah mengapa saya meninggalkan komentar itu. Saya tidak downvote. Itu adalah kesempatan bagus untukmu.
Umair Farooq

1
@UmairFarooq mungkin mengajukan pertanyaan lain akan sia-sia karena bisa ditandai sebagai duplikat. Saya datang ke sini hanya dengan pencarian google dan saya menemukan pertanyaan ini bermanfaat, jawab defligra juga.
koMah

3

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/


1
Bagi saya, itu adalah fakta memiliki gaya ini di pembungkus yang mengandung elemen tetap yang mencegah yang tetap dari lengket: -webkit-perspektif: 1000; -webkit-transform-style: preserverve-3d; Mengambil ini dan semuanya berfungsi dengan baik. Mereka adalah optimasi yang dipertanyakan!
Amalgovinus

Menghapus transformasi, dengan cara apa pun, mungkin merupakan solusi terbaik sejauh ini. Sesuatu seperti fade-in, setelah selesai, harus dilepas tanpa mempengaruhi tampilan elemen. Sebenarnya, saya tidak yakin apa yang memiliki transformX (0) berkeliaran akan membuat kinerja, jika ada; itu bisa diabaikan, atau bisa merusak kinerja, atau bisa membuatnya lebih baik dengan memaksa semacam akselerasi 3D. Siapa tahu. Bagaimanapun, begitu animasi selesai, atau bahkan sebelum elemen tetap ditambahkan, animasi dapat dengan mudah menghapus kelas CSS untuk transformasi.
Triynko

1

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

1

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.


1

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


0

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

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

20
Itu tidak berhasil untuk saya. Apakah Anda dapat membuat demo agar berfungsi?
alex

4
Ini memperbaiki masalah bagi saya di Chrome, FWIW. Terima kasih Ron.
Chris

3
Terima kasih, ini membuat saya masalah. Menyelamatkan hidupku!
styke

1
@Neil Monroe, Android 2.3 adalah cerita yang sama sekali baru. Sama sekali tidak mendukung penentuan posisi tetap :)
Wiseman

8
Berikut adalah biola di mana menggunakan translateZ(0) JANGAN bekerja. Memang benar itu bekerja kadang-kadang, saya telah melihat kesempatan di mana ia bekerja. Tapi saya masih tidak bisa mempersempitnya.
Zequez

0

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

2
Mengapa downvotes? Alangkah baiknya jika Anda memberikan komentar mengapa Anda tidak memilih jawaban saya?
Murf

0

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>

0

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.


0

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.


0

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 (,).


-1

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

1
Ini, seperti, benar-benar dalam judul pertanyaan
Eugene Pankov

@EugenePankov Tidak melihat 'tidak ada' dalam judul. Itu yang memperbaiki masalah saya dan secara umum tidak ada yang menyarankan untuk mematikannya. Meskipun ini bukan jawaban yang tepat untuk pertanyaan itu, tetapi bisa membantu seseorang yang tidak ingin menggunakan transformasi dan transformasi berasal dari perpustakaan lain. Jadi saya tidak ingin suara, tapi tolong jangan turun suara. Saya akan mengedit pertanyaan saya untuk mengatakan bahwa saya tidak ingin suara.
makkasi
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.