Your cart is currently empty!
[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 *
by
Tags:
Leave a Reply