[CSS] วิธีแก้ปัญหา background-attachment: fixed ใน Chrome ตอนทำ Parallax

Parallax คือการทำให้ตอนเลื่อนจอแล้ว Object ต่าง ๆ ในหน้าเว็บไซต์ไม่ได้ขยับแบบปกติ เช่น อาจจะขยับหน่วง ๆ ช้ากว่า Mouse หรือเปลี่ยนรูปร่างต่าง ๆ แบบสวยงาม

การใส่ background-attachment: fixed เป็นการทำให้ Background ของเรา fix กับจอ เวลาเลื่อนจอมันจะอยู่นิ่ง ๆ เท่ไปอีกแบบ และหลายคนก็เข้าใจผิดว่ามันคือ Parallax

อย่างไรก็ตาม มันก็เป็น Effect ที่เท่ดี แต่ปัญหาจะตามมาเวลาใช้ background-attachment: fixed ร่วมกับ background-size: cover ใน Google Chrome พอเลื่อนไปมารูปเราจะกลายเป็นแถบขาว ๆ แปลก ๆ (ใน Firefox ไม่เป็น)

วิธีการแก้ไข

แค่ใส่ z-index: 1 เข้าไปใน Element ที่มี background-attachment: fixed และ background-size: cover ทีนี้บั๊กนี้ก็จะหายไป ไย ไย ไย ไย

* เจอบทความบอกว่าทำแบบนี้ไม่ดีต่อความเร็วเว็บครับ ทำให้เว็บหน่วงได้ เค้าแนะนำวิธีนี้แทน https://fourword.fourkitchens.com/article/fix-scrolling-performance-css-will-change-property *

Leave a Reply

Your email address will not be published. Required fields are marked *