ตำแหน่งคงที่ไม่ทำงานเมื่อใช้ -webkit-transform

ฉันใช้ -webkit-transform (และ -moz-transform / -o-transform) เพื่อหมุน div นอกจากนี้ยังมีการแก้ไขตำแหน่งเพิ่มเพื่อให้ div scrols ลงกับผู้ใช้

ใน Firefox มันใช้งานได้ดี แต่ในเบราว์เซอร์ที่ใช้ webkit จะใช้งานไม่ได้ หลังจากใช้ -webkit-transform ตำแหน่งที่แก้ไขไม่ทำงานอีกต่อไป! เป็นไปได้อย่างไร?

หลังจากการวิจัยมีรายงานข้อผิดพลาดในเว็บไซต์Chromiumเกี่ยวกับปัญหานี้จนถึงขณะนี้เบราว์เซอร์ Webkit ไม่สามารถแสดงเอฟเฟกต์ทั้งสองนี้พร้อมกันได้ในเวลาเดียวกัน

ฉันขอแนะนำให้เพิ่มบาง Webkit CSS เท่านั้นลงในสไตล์ชีทของคุณและทำให้ div ที่แปลงเป็นรูปภาพและใช้เป็นพื้นหลัง

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

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

ดังนั้นสำหรับตอนนี้คุณจะต้องทำแบบเก่า ๆ จนกระทั่งเบราว์เซอร์ Webkit ถึง FF

แก้ไข: ตั้งแต่วันที่ 10/24/2012 ข้อผิดพลาดยังไม่ได้รับการแก้ไข

สิ่งนี้ดูเหมือนจะไม่เป็นข้อผิดพลาด แต่เป็นแง่มุมของข้อมูลจำเพาะเนื่องจากทั้งสองเอฟเฟ็กต์ที่ต้องการระบบพิกัดแยกต่างหากและคำสั่งการซ้อน ตามที่อธิบายไว้ในคำตอบนี้

แปลง CSS ข้อมูลจำเพาะอธิบายพฤติกรรมนี้ องค์ประกอบที่มีการแปลงทำหน้าที่เป็นบล็อกที่มีสำหรับลูกหลานตำแหน่งคงที่ดังนั้นตำแหน่ง: แก้ไขภายใต้สิ่งที่มีการแปลงไม่มีพฤติกรรมคงที่อีกต่อไป

มันทำงานได้เมื่อใช้กับองค์ประกอบเดียวกัน องค์ประกอบจะถูกวางตำแหน่งเป็นคงที่แล้วเปลี่ยน

สำหรับผู้ที่พบว่าภาพพื้นหลังของพวกเขาหายไปใน Chrome เนื่องจากปัญหาเดียวกันกับสิ่งที่แนบมากับพื้นหลัง: แก้ไขแล้ว; - นี่คือทางออกของฉัน:

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

    });
}  

บางสิ่งบางอย่าง (แฮ็คบิต) ที่ทำงานให้ฉันposition:stickyแทน:

.fixed {
     position: sticky;
}

สิงหาคม 2559 และตำแหน่งและภาพเคลื่อนไหว / การแปลงที่แน่นอนยังคงเป็นปัญหาอยู่ ทางออกเดียวที่เหมาะกับฉัน - คือการสร้างอนิเมชั่นสำหรับองค์ประกอบย่อยที่ใช้เวลานาน

ที่จริงฉันพบวิธีอื่นในการแก้ไข "ข้อบกพร่อง" นี้:

ฉันมีองค์ประกอบที่เก็บหน้ากับภาพเคลื่อนไหว css3 เมื่อเพจเสร็จสิ้นการเคลื่อนไหวคุณสมบัติ css3 จะมีค่า: transform: translate (0,0); ดังนั้นฉันเพิ่งลบบรรทัดนี้และทุกอย่างทำงานตามที่ควร - ตำแหน่ง: คงที่จะแสดงอย่างถูกต้อง เมื่อมีการใช้คลาส css เพื่อแปลหน้าคุณสมบัติการแปลจะถูกเพิ่มและภาพเคลื่อนไหว css3 ก็ใช้ได้เช่นกัน

ตัวอย่าง:

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

ตัวอย่าง: http://jsfiddle.net/ZWcD9/

ในโครงการโทรศัพท์ของฉัน webkit transform -webkit-transform: translateZ (0); ทำงานเหมือนจับใจ มันใช้งานได้ในโครมและซาฟารีไม่ใช่เบราว์เซอร์มือถือ นอกจากนี้ยังมีอีกหนึ่งปัญหาคือ WRAPPER DIVs ไม่เสร็จสมบูรณ์ในบางกรณี เราใช้คลาสที่ชัดเจนในกรณีของ DIV แบบลอยตัว

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

อาจเป็นเพราะจุดบกพร่องใน Chrome เนื่องจากฉันไม่สามารถทำซ้ำใน Safari หรือ Firefox ได้ แต่ใช้งานได้ใน Chrome 40.0.2214.111 http://jsbin.com/hacame/1/edit?html,css,output

มันเป็นโครงสร้างที่เฉพาะเจาะจงมากดังนั้นจึงไม่มีทางแก้ไข css ที่เรียงแถวกันได้ แต่อาจมีบางคนที่สามารถแก้ไขมันเพื่อให้มันทำงานได้ใน Safari และ Firefox

ฉันมีปัญหานี้ในขณะที่พยายามใช้สีแบบตอบโต้พร้อมกับ ปัญหาสำหรับฉันคือการที่ rsw นำtranslate(-100%, 0)ไปใช้กับแผงแท็บที่แบ่ง div ตำแหน่งคงที่เริ่มต้นที่เพิ่มเข้ามาเต็มหน้าจอซึ่งเมื่อคลิกปิดจะปิดตัวเลือกสี

สำหรับฉันทางออกคือการใช้การแปลงตรงข้ามกับองค์ประกอบคงที่ (ในกรณีนี้translate(100%, 0)ซึ่งแก้ไขปัญหาของฉันฉันไม่แน่ใจว่าสิ่งนี้มีประโยชน์ในกรณีอื่น ๆ แต่คิดว่าฉันจะแบ่งปันต่อไป

นี่คือตัวอย่างที่แสดงสิ่งที่ฉันอธิบายไว้ข้างต้น:

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

การเพิ่ม-webkit-transformองค์ประกอบที่คงที่ช่วยแก้ไขปัญหาให้ฉันได้

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

นี่คือสิ่งที่ใช้ได้กับฉันในเบราว์เซอร์และอุปกรณ์มือถือที่ผ่านการทดสอบ (Chrome, IE, Firefox, Safari, iPad, iphone 5 และ 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%);
}

ตำแหน่งคงที่ขององค์ประกอบจะเสียหากคุณใช้การแปลงสภาพกับบรรพบุรุษใด ๆ

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

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

หากคุณสามารถใช้จาวาสคริปต์เป็นตัวเลือกสิ่งนี้อาจเป็นวิธีแก้ปัญหาสำหรับการวางตำแหน่งองค์ประกอบคงที่ซึ่งสัมพันธ์กับหน้าต่างเมื่ออยู่ในองค์ประกอบที่ถูกแปลง:

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

ได้รับคุณจะต้องปรับความสูงและความกว้างของคุณเพราะfixedElจะคำนวณมันขึ้นอยู่กับภาชนะของมัน ขึ้นอยู่กับกรณีการใช้งานของคุณ แต่สิ่งนี้จะช่วยให้คุณสามารถกำหนดตำแหน่งบางสิ่งได้อย่างแน่นอนไม่ว่าจะอยู่ในคอนเทนเนอร์ใด

เพิ่มคลาสแบบไดนามิกในขณะที่องค์ประกอบแปลง $('#elementId').addClass('transformed'). จากนั้นไปประกาศใน css

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

แล้วก็

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

แล้วก็

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

ตำแหน่งตอนนี้: แก้ไขเมื่อได้รับค่าคุณสมบัติบนและดัชนี z บนองค์ประกอบลูกเพิ่งทำงานได้ดีและคงที่จนกว่าองค์ประกอบหลักจะเปลี่ยน เมื่อการแปลงกลับเป็นองค์ประกอบลูกก็จะกลับมาเหมือนเดิมอีกครั้ง สิ่งนี้จะช่วยลดสถานการณ์ได้หากคุณใช้แถบข้างการนำทางที่สลับเปิดและปิดเมื่อคลิกและคุณมีชุดแท็บที่ควรค้างไว้ในขณะที่คุณเลื่อนหน้าลง

ในกรณีของฉันฉันพบว่าเราไม่สามารถใช้การแปลง: translateX () ก่อนการแปลง: translateY () ถ้าเราต้องการใช้ทั้งคู่เราควรใช้การแปลง: translate (,)

โปรดอย่าโหวตเพราะนี่ไม่ใช่คำตอบที่แน่นอน แต่สามารถช่วยใครคนหนึ่งได้เพราะมันรวดเร็วในการปิดการเปลี่ยนแปลง หากคุณไม่ต้องการการแปลงจากผู้ปกครองจริงๆและคุณต้องการให้ตำแหน่งคงที่ของคุณทำงานอีกครั้ง:

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