-Webkit-transform kullanılırken sabit konumlar çalışmaz

Bir div döndürmek için -webkit-transform (ve -moz-transform / -o-transform) kullanıyorum. Ayrıca, konumun kullanıcı ile kaydırılması için sabit konum eklendi.

Firefox'ta iyi çalışıyor, ancak webkit tabanlı tarayıcılarda bozuk. -Webkit-dönüşümünü kullandıktan sonra, sabit konum artık çalışmaz! Bu nasıl mümkün olabilir?

Biraz araştırma yaptıktan sonra , Chromium web sitesinde bu sorunla ilgili bir hata raporu var , şimdiye kadar Webkit tarayıcıları bu iki efekti aynı anda oluşturamıyor.

Bazı Webkit'i sadece CSS'yi stil sayfanıza eklemenizi ve dönüştürülmüş div'ı bir görüntü haline getirmenizi ve arka plan olarak kullanmanızı öneririm.

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

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

Şimdilik, Webkit tarayıcıları FF'yi yakalayana kadar eski moda bir şekilde yapmalısınız.

EDIT: 24.08.2012 itibariyle hata çözülmedi.

Bu bir hata değil, ayrı koordinat sistemleri ve istifleme siparişleri gerektiren iki efekt nedeniyle spesifikasyonun bir yönü gibi görünüyor. Bu cevapta açıklandığı gibi .

CSS Dönüşümleri Spec bu davranışı açıklar. Dönüşümleri olan elemanlar, sabit konum torunları için bir kapsayıcı görevi görür, bu nedenle konum: dönüşümü olan bir şeyin altına sabitlenmiş artık sabit davranışa sahip değildir.

Aynı elemana uygulandığında çalışırlar; eleman sabit olarak konumlandırılacak ve daha sonra dönüştürülecektir.

Arka plan resimlerini bulan herkes için Chrome'da arka plan eki ile aynı sorun nedeniyle kaybolduğu için: sabit; - bu benim çözümümdü:

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

    });
}  

Benim için işe yarayan bir şey (biraz hacky) position:stickybunun yerine:

.fixed {
     position: sticky;
}

Ağustos 2016 ve sabit konum & animasyon / dönüşüm hala bir sorun. Benim için çalışan tek çözüm, daha uzun zaman alan alt öğe için bir animasyon oluşturmaktı.

Aslında bu "hata" düzeltmek için başka bir yol buldum:

Ben css3 animasyonları ile sayfa tutan konteyner elemanı var. Sayfa animasyonu tamamladığında, css3 özelliğinin değeri vardır: transform: translate (0,0) ;. Bu nedenle, sadece bu satırı kaldırdım ve her şey olması gerektiği gibi çalıştı - konum: sabit düzgün görüntüleniyor. Sayfayı çevirmek için css sınıfı uygulandığında, translate özelliği eklenir ve css3 animasyonu da çalışır.

Misal:

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

telefongap projemde webkit dönüşümü -webkit-transform: translateZ (0); bir cazibe gibi çalıştı. Zaten mobil tarayıcıda değil, krom ve safari'de çalışıyordu. ayrıca WRAPPER DIV'lerin bazı durumlarda tamamlanmadığı bir sorun daha olabilir. yüzen DIV'ler için net sınıf uygularız.

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

Safari'de veya Firefox'ta kopyalayamadığım için muhtemelen Chrome'daki bir hata nedeniyle, ancak bu Chrome'da çalışıyor 40.0.2214.111 http://jsbin.com/hacame/1/edit?html,css,output

Bu çok özel bir yapıdır, bu yüzden evrensel olarak uygulanabilir tek çizgili bir css düzeltmesi değildir, ancak belki biri Safari ve Firefox'ta çalışmasını sağlamak için onunla uğraşabilir.

Tepki-kaydırılabilir görünümleri (rsw) ile tepki rengi uygulamaya çalışırken bu sorunu yaşadım. Benim için sorun, rsw translate(-100%, 0), tıklatıldığında renk seçici modelini kapatan tam ekran üzerine eklenen varsayılan sabit konum div'ı kıran bir sekme paneline uygulanmasıydı.

Benim için çözüm zıt dönüşümü sabit elemana uygulamaktı (bu durumda translate(100%, 0)sorunumu düzeltti. Bunun başka durumlarda yararlı olup olmadığından emin değilim ama yine de paylaşacağımı düşündüm.

Yukarıda açıkladığımı gösteren bir örnek:

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

-webkit-transformSabit öğeye eklemek sorunu benim için çözdü.

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

İşte benim için test edilen tüm tarayıcılarda ve mobil cihazlarda (Chrome, IE, Firefox, Safari, iPad, iphone 5 ve 6, Android) işe yarar.

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

herhangi bir ataya dönüştürme uygularsanız bir öğenin sabit konumu bozulur.

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

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

JavaScript'i bir seçenek olarak kullanabiliyorsanız, bu, dönüştürülmüş bir öğenin içindeyken pencereye bağlı bir konum sabit öğesini konumlandırmak için bir çözüm olabilir:

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

Ayrıca yükseklik ve genişliğini de ayarlamanız gerekecek, çünkü fixedElkonteynerine göre hesaplanacak. Bu, kullanım durumunuza bağlıdır, ancak bu, kabından bağımsız olarak sabit bir şey konumunu tahmin etmenize olanak tanır.

Öğe dönüştürülürken dinamik bir sınıf ekleyin. $('#elementId').addClass('transformed'). Sonra css'de beyan etmeye devam et,

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

sonra

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

sonra

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

Şimdi konum: bir alt öğe üzerinde bir üst ve z-endeksi özellik değerleri sağlandığında sabit, sadece iyi çalışır ve üst öğe dönüşene kadar sabit kalır. Dönüşüm geri döndürüldüğünde, alt öğe tekrar sabitlenmiş olarak açılır. Bu, aslında bir tıklamayla açılıp kapanan bir gezinme kenar çubuğu kullanıyorsanız ve sayfayı aşağı kaydırdıkça yapışkan kalması gereken bir sekme kümeniz varsa durumu kolaylaştırmalıdır.

benim durumumda, transform: translateX () öğesini transform: translateY () yönteminden önce kullanamayacağımızı öğrendim.

Lütfen oy vermeyin, çünkü bu kesin bir cevap değildir, ancak birisine yardımcı olabilir, çünkü sadece dönüşümü kapatmanın hızlı yolu. Ebeveyn üzerinde dönüştürmeye gerçekten ihtiyacınız yoksa ve sabit konumunuzun tekrar çalışmasını istiyorsanız:

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