'transform3d' konumu ile çalışmıyor: sabit çocuklar

Normal CSS koşullarında, sabit bir div'in tam olarak belirtildiği yere yerleştirileceği bir durumum var ( top:0px, left:0px).

Bir translate3d dönüşümü olan bir ebeveyni varsa, bu saygı duyulmuyor gibi görünüyor. Bir şey görmüyor muyum? Stil ve dönüşüm kökeni seçenekleri gibi diğer webkit-dönüşüm denedim ama şansım yoktu.

Sarı kutunun kap öğesinin içinde değil sayfanın üst köşesinde olmasını beklediğim bir örnekle bir JSFiddle iliştirdim .

Aşağıda kemanın basitleştirilmiş bir versiyonunu bulabilirsiniz:

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

Translate3d'nin sabit konumlu çocuklarla nasıl çalışmasını sağlayabilirim?

Bunun nedeni, W3C spesifikasyonuna göretransform yeni bir yerel koordinat sistemi oluşturmasıdır :

HTML ad alanında, nonedönüştürme dışındaki herhangi bir değer hem yığınlama bağlamının hem de içeren bir bloğun oluşturulmasına neden olur. Nesne, sabit konumlu torunlar için bir blok görevi görür.

Bu, sabit konumlandırmanın görüntü alanı yerine dönüştürülmüş öğeye sabitlendiği anlamına gelir.

Şu anda farkında olduğum bir çözüm yok.

Aynı zamanda Eric Meyer'ın Sabit Öğelerin CSS Dönüşümleriyle Sabitlenmesini Kaldırma makalesinde de belgelenmiştir .

Sayfadaki öğeler dönüşüm kullanırken sabit üst gezinti panelimde bir titreme vardı, üst gezinme sistemime uygulanan aşağıdaki atlama / titreme sorununu çözdü:

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

SO'daki bu cevap sayesinde

Bradoergo'nun önerdiği gibi, pencereyi alın scrollTopve aşağıdaki gibi mutlak konuma ekleyin:

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

Bu zaten benim için çalıştı.

Firefox ve Safari'de position: sticky;bunun yerine kullanabilirsiniz , position: fixed;ancak diğer tarayıcılarda çalışmaz. Bunun için javascript'e ihtiyacınız var.

Bence, bununla başa çıkmanın en iyi yöntemi aynı çeviriyi uygulamak, ancak ebeveynlerinin (çevrilmiş) öğelerinden düzeltilmesi gereken çocukları kırmaktır; ve sonra çeviriyi position: fixedambalajın içindeki bir div öğesine uygulayın .

Sonuçlar şuna benzer (sizin durumunuzda):

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

Bu, bazı kullanım durumları için ideal olmasa da, genellikle bir div'i onarıyorsanız, hangi öğenin üst öğesi olduğu / DOM'nuzdaki miras ağacına nerede düştüğü ve baş ağrısının çoğunu çözdüğü düşünülebilir. - her ikisine de izin verirken translateve position: fixed(göreceli) uyum içinde yaşamaya devam ederken .

Ben de aynı problemle karşılaştım. Tek fark, 'position: fixed' öğesinin JS'den ayarlanmış 'top' ve 'sol' stil özelliklerine sahip olmasıdır. Böylece bir düzeltme uygulayabildim:

var oRect = oElement.getBoundingClientRect();

oRect nesnesi gerçek (görünüm bağlantı noktasına göre) üst ve sol koordinatları içerecektir . Böylece gerçek oElement.style.top ve oElement.style.left özelliklerini ayarlayabilirsiniz.

-Webkit-transform: translate3d kullanan bir tuval dışı kenar çubuğum var. Bu, sayfaya sabit bir altbilgi yerleştirmemi engelliyordu. Kenar çubuğunun başlatılması etiketine eklenen html sayfasında bir sınıf hedefleyerek ve sonra "-webkit-transform: none;" durumunu belirtmek için bir css: niteleyici yazarak sorunu çözdüm. html etiketinde bu sınıf bulunmadığında html etiketine ekleyin. Bu aynı sorun ile orada birine yardım umut!

Alt öğeye zıt dönüşüm uygulamaya çalışın:

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

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

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

sonra

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

sonra

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

Şimdi bir alt öğede position: fixeda topve z-indexözellik değerleri sağlandığında, 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.

Bununla başa çıkmanın bir yolu, aynı dönüşümü sabit elemana uygulamaktır:

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