การเลื่อน iPad ของ Safari ทำให้องค์ประกอบ HTML หายไปและปรากฏขึ้นอีกครั้งด้วยความล่าช้า

ฉันกำลังพัฒนาเว็บแอปโดยใช้ HTML5 และ jQuery สำหรับ iPad ซาฟารี ฉันพบปัญหาที่พื้นที่เลื่อนขนาดใหญ่ทำให้องค์ประกอบที่อยู่นอกจอปรากฏหลังจากล่าช้าเมื่อฉันเลื่อนลงไปที่องค์ประกอบเหล่านั้น

สิ่งที่ฉันหมายถึงคือถ้าฉันมีแถวของภาพ (หรือแม้กระทั่ง div ที่มีการไล่ระดับสี) ที่เป็นหน้าจอเมื่อฉันเลื่อนลง (หรือขึ้น) ไปที่มันพฤติกรรมที่คาดหวังสำหรับองค์ประกอบที่จะปรากฏบนหน้าจอเป็น ฉันกำลังเลื่อนไปที่มัน

อย่างไรก็ตามสิ่งที่ฉันเห็นก็คือองค์ประกอบจะไม่ปรากฏขึ้นจนกว่าฉันจะยกนิ้วออกจากหน้าจอและผู้เลื่อนภาพเคลื่อนไหวเสร็จสิ้น

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

คุณต้องใช้เบราว์เซอร์เพื่อใช้การเร่งความเร็วฮาร์ดแวร์อย่างมีประสิทธิภาพยิ่งขึ้น คุณสามารถทำได้ด้วยการแปลงว่างเปล่า 3 มิติ:

-webkit-transform: translate3d(0,0,0)

โดยเฉพาะอย่างยิ่งคุณจะต้องใช้สิ่งนี้กับองค์ประกอบย่อยที่มีการposition:relative;ประกาศ (หรือออกไปทั้งหมดและทำกับองค์ประกอบย่อยทั้งหมด)

ไม่ใช่การแก้ไขที่รับประกันได้ แต่ประสบความสำเร็จเป็นส่วนใหญ่

เคล็ดลับหมวก: https://web.archive.org/web/20131005175118/http://cantina.co/2012/03/06/ios-5-native-scrolling-grins-and-gothcas/

นี่คือคำตอบที่สมบูรณ์สำหรับคำถามของฉัน เดิมทีฉันทำเครื่องหมายคำตอบ @Colin Williams เป็นคำตอบที่ถูกต้องเพราะมันช่วยให้ฉันแก้ปัญหาได้อย่างสมบูรณ์ สมาชิกชุมชน @Slipp D. Thompson แก้ไขคำถามของฉันหลังจากนั้นประมาณ 2.5 ปีที่ฉันถามคำถามและบอกฉันว่าฉันใช้รูปแบบ Q & A ของการดูถูกเหยียดหยาม เขาบอกให้ฉันแยกโพสต์นี้เป็นคำตอบ ดังนั้นนี่คือคำตอบที่สมบูรณ์ที่แก้ปัญหาของฉัน:

@Colin Williams ขอขอบคุณ! คำตอบของคุณและบทความที่คุณเชื่อมโยงไว้ทำให้ฉันมีโอกาสลองใช้ CSS

ดังนั้นฉันเคยใช้ translate3d มาก่อน มันผลิตผลลัพธ์ที่ไม่พึงประสงค์ โดยพื้นฐานแล้วมันจะตัดออกและไม่แสดงองค์ประกอบที่เป็นหน้าจอจนกว่าฉันจะโต้ตอบกับพวกเขา ดังนั้นโดยพื้นฐานแล้วในการวางแนวนอนครึ่งหนึ่งของไซต์ของฉันที่เป็นหน้าจอไม่แสดงให้เห็น นี่คือแอปพลิเคชันบนเว็บของ iPad เนื่องจากฉันแก้ไขปัญหาได้

การใช้ translate3d กับองค์ประกอบที่มีตำแหน่งค่อนข้างจะช่วยแก้ปัญหาสำหรับองค์ประกอบเหล่านั้นได้ แต่องค์ประกอบอื่น ๆ หยุดการแสดงผลทันทีที่ปิดหน้าจอ องค์ประกอบที่ฉันไม่สามารถโต้ตอบกับได้ (อาร์ตเวิร์ค) จะไม่สามารถแสดงผลได้อีกเว้นแต่ฉันจะโหลดหน้าซ้ำ

ทางออกที่สมบูรณ์:

*:not(html) {
    -webkit-transform: translate3d(0, 0, 0);
}

ถึงแม้ว่านี่อาจไม่ใช่โซลูชันที่ "มีประสิทธิภาพ" มากที่สุด แต่ก็เป็นโซลูชั่นเดียวที่ใช้งานได้ มือถือ Safari ไม่แสดงองค์ประกอบที่ Offscreen -webkit-overflow-scrolling: touchหรือบางครั้งการแสดงผลผิดพลาดเมื่อใช้ เว้นแต่ว่าจะมีการใช้ translate3d กับองค์ประกอบอื่น ๆ ทั้งหมดที่อาจปิดหน้าจอเนื่องจากการเลื่อนนั้นองค์ประกอบเหล่านั้นจะถูกสับออกหลังจากเลื่อน

ดังนั้นขอขอบคุณอีกครั้งและหวังว่าสิ่งนี้จะช่วยให้วิญญาณที่หลงหายอีก นี่ช่วยฉันได้ครั้งใหญ่!

การกำหนดเป้าหมายองค์ประกอบทั้งหมดยกเว้น html: *:not(html) ทำให้เกิดปัญหากับองค์ประกอบอื่น ๆ ในกรณีของฉัน มันแก้ไขบริบทการสแต็กทำให้ดัชนี z บางตัวหยุดทำงาน

เราดีขึ้นควรพยายามที่จะกำหนดเป้าหมายองค์ประกอบที่เหมาะสมและใช้-webkit-transform: translate3d(0,0,0)มันเท่านั้น

แก้ไข: บางครั้งใช้translate3D(0,0,0)ไม่ได้เราสามารถใช้วิธีการต่อไปนี้กำหนดเป้าหมายองค์ประกอบที่เหมาะสม:

@keyframes redraw{
    0% {opacity: 1;}
    100% {opacity: .99;}
}

// ios redraw fix
animation: redraw 1s linear infinite;

เมื่อ translate3d ไม่ทำงานให้ลองเพิ่มมุมมอง มันได้ผลสำหรับฉันเสมอ

transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
perspective: 1000;
-webkit-perspective: 1000;

http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css

เพิ่ม-webkit-transform: translate3d(0,0,0)ไปยังองค์ประกอบแบบคงที่ไม่ทำงานสำหรับฉัน

ฉันใช้คุณสมบัตินี้แบบไดนามิก ตัวอย่างเช่นเมื่อเลื่อนหน้าฉันตั้งค่า-webkit-transform: translate3d(0,0,0)องค์ประกอบ ฉันก็รีเซ็ตคุณสมบัตินี้นั่นคือ-webkit-transform: none วิธีนี้ดูเหมือนจะใช้งานได้

ขอบคุณ @Colin Williams ที่ชี้ให้ฉันไปในทิศทางที่ถูกต้อง

ผมมีปัญหาเดียวกันกับ iscroll 4.2.5 บน iOS7 องค์ประกอบทั้งเลื่อนเพียงแค่หายไป ผมเคยพยายามที่จะเพิ่มtranslate3d(0,0,0)ตามที่ได้แนะนำที่นี่ก็มีการแก้ไขปัญหาที่เกิดขึ้น แต่มันปิดการใช้งาน iscroll ว่า "แน็ป" ผล วิธีการแก้ปัญหาให้มาพร้อมกับ"position:relative; z-index:1000;display:block"คุณสมบัติ CSS เพื่อภาชนะทั้งที่มีองค์ประกอบเลื่อนและไม่มีความจำเป็นที่จะให้ translate3d องค์ประกอบเด็ก

ในช่วงเวลาtranslate3dอาจไม่ทำงานในกรณีดังกล่าวperspectiveสามารถนำมาใช้

transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
perspective: 1000;
-webkit-perspective: 1000;

ฉันค่อนข้างแน่ใจว่าฉันเพิ่งจะแก้ปัญหานี้ด้วย:

overflow-y: auto;

(สมมุติว่าoverflow: auto;จะใช้งานได้มากเกินไปตามความต้องการของคุณ

มีหลายกรณีที่มีการหมุนถูกนำไปใช้และ / หรือดัชนี Zถูกนำมาใช้

การหมุน : การประกาศที่มีอยู่ของ-webkit-transformการหมุนองค์ประกอบอาจจะไม่เพียงพอที่จะจัดการปัญหาลักษณะนี้เช่นกัน (ชอบ-webkit-transform: rotate(-45deg)) ในกรณีนี้คุณสามารถใช้-webkit-transform: translateZ(0px) rotateZ(-45deg)เป็นเคล็ดลับ ( คิดหมุนZ )

Z ดัชนี : ร่วมกันกับการหมุนที่คุณอาจกำหนดเป็นบวกคุณสมบัติเช่นz-index z-index: 42ขั้นตอนข้างต้นที่อธิบายไว้ภายใต้ "การหมุน" อยู่ในกรณีของฉันเพียงพอที่จะแก้ไขปัญหาแม้ว่าจะว่างเปล่าtranslateZ(0px)ก็ตาม ฉันสงสัยว่าที่ดัชนี Z ในกรณีนี้อาจจะเกิดจากการหายไปและโผล่มาให้เห็นในสถานที่แรก ไม่ว่าในกรณีใด ๆz-index: 42สถานที่ให้บริการจะต้องเก็บไว้ - -webkit-transform: translateZ(42px)เท่านั้นไม่เพียงพอ

ปัญหานี้เป็นปัญหาที่พบบ่อยมากต้องเผชิญกับนักพัฒนาและนั่นคือสาเหตุหลักมาจากคุณสมบัติขององค์ประกอบไม่ได้สร้างตามที่กำหนดไว้Safari'sposition : fixed

ดังนั้นเปลี่ยนคุณสมบัติตำแหน่งหรือแฮ็คบางตัวที่ต้องนำไปใช้ตามที่ระบุไว้ในคำตอบอื่น ๆ

link1

link2

ในกรณีของฉัน (แอพ iOS Phonegap) การใช้ translate3d กับองค์ประกอบย่อยสัมพันธ์ไม่สามารถแก้ไขปัญหาได้ องค์ประกอบที่เลื่อนได้ของฉันไม่ได้มีความสูงตามที่กำหนดไว้อย่างแน่นอนและฉันกำหนดตำแหน่งด้านบนและด้านล่าง สิ่งที่แก้ไขให้ฉันคือการเพิ่มความสูงขั้นต่ำ (จาก 100px)

ฉันมีปัญหาเดียวกันโดยใช้ Fancybox รุ่นเก่ากว่า การอัพเกรดเป็น v3 จะช่วยแก้ปัญหาของคุณหรือคุณสามารถเพิ่ม:

html, body {
    -webkit-overflow-scrolling : touch !important;
    overflow: auto !important;
    height: 100% !important;
}

ฉันประสบปัญหานี้ในโครงการ Framework7 & Cordova ฉันลองวิธีแก้ปัญหาทั้งหมดข้างต้น พวกเขาไม่ได้แก้ปัญหาของฉัน

ในกรณีของฉันฉันใช้ภาพเคลื่อนไหว 10+ css ในหน้าเดียวกันกับการหมุนแบบไม่สิ้นสุด (เปลี่ยนรูป) ผมต้องลบภาพเคลื่อนไหว ตอนนี้มันก็โอเคกับการขาดคุณสมบัติภาพบางอย่าง

หากวิธีการข้างต้นไม่ช่วยคุณคุณอาจเริ่มกำจัดภาพเคลื่อนไหวบางอย่าง

-webkit-transform: translate3d(0, 0, 0);เคล็ดลับไม่ทำงานสำหรับฉัน ในกรณีของฉันฉันได้ตั้งผู้ปกครองเป็น:

// parent
height: 100vh;

การเปลี่ยนเป็น:

height: auto;
min-height: 100vh;

แก้ไขปัญหาในกรณีที่คนอื่นกำลังเผชิญสถานการณ์เดียวกัน

ในกรณีของฉัน CSS ไม่ได้แก้ไขปัญหา ฉันสังเกตเห็นปัญหาขณะใช้ jQuery แสดงปุ่มใหม่

$("#myButton").html("text")

ลองสิ่งนี้

$("#myButton").html("<span>text</span>")