คริส โทร เงาเลื่อน หนึ่งใน CSS-Tricks ที่เขาโปรดปรานตลอดกาล ลีอา เวรู ความนิยม วิธีการ CSS บริสุทธิ์โดยใช้การไล่ระดับสีพื้นหลังสี่ชั้นด้วยความฉลาด background-attachment มายากล. ผลลัพธ์คือการโต้ตอบแบบเลื่อนได้ลื่นไหลซึ่งให้คำใบ้แก่ผู้ใช้ว่าเนื้อหาเพิ่มเติมมีอยู่ในคอนเทนเนอร์แบบเลื่อนได้
ปัญหาเดียวเท่านั้น: มัน ยากจน ใน Safari iOS 13 วันหนึ่งมันก็ดีไปหมด ต่อไปไม่เท่าไหร่ และนั่นไม่ใช่สิ่งเดียวที่ได้รับผลกระทบ เอฟเฟกต์พารัลแลกซ์ CSS เท่านั้นของ Keith Clark ก็หยุดทำงานในขณะนั้นเช่นกัน
เอาล่ะผู้อ่าน Ronald เขียนใน ที่บอกว่าทุกอย่างได้ผลอีกครั้ง! อันที่จริง ตอนนี้ฉันกำลังเขียนสิ่งนี้บน iPad (Safari 15.5) และการสาธิตของ Chris ก็ดูเฉียบคมเช่นเคย ของคีธก็เช่นกัน การสาธิตดั้งเดิม.
แล้วอะไรทำให้แตก? เรายังไม่ทราบ แต่ บันทึกประจำรุ่นของ Safari 13 เสนอเบาะแส:
- เพิ่มการรองรับการเลื่อนแบบเร่งด้วยนิ้วเดียวไปยังเฟรมทั้งหมดและ
overflow:scrollองค์ประกอบที่ขจัดความจำเป็นในการset-webkit-overflow-scrolling: touch.- เปลี่ยนการทำงานเริ่มต้นบน iPad สำหรับหน้าเว็บแบบกว้างด้วยเมตาแท็กที่ตอบสนองที่ต้องการการเลื่อนในแนวนอน หน้าจะถูกปรับขนาดเพื่อป้องกันการเลื่อนในแนวนอน และข้อความใดๆ จะถูกปรับขนาดเพื่อรักษาความชัดเจน
แก้ไขเมื่อไหร่ และแก้ไขอย่างไร? ด้านเงาเลื่อน Safari 15.4 รวม งานบางอย่างเกี่ยวกับ background-attachment: local ที่อาจได้ทำเคล็ดลับ ด้านพารัลแลกซ์ Safari 14.1 ที่เพิ่ม รองรับคุณสมบัติการแปลงแต่ละแบบ... อย่างนั้นเหรอ?
