คอมโพเนนต์แถบนำทางของ BBC พังตามจอนอกที่ใช้งาน

 (joshtumath.uk)
1 คะแนน โดย GN⁺ 2024-11-19 | 1 ความคิดเห็น | แชร์ทาง WhatsApp

  • บั๊กในคอมโพเนนต์แถบนำทางของ BBC

    • เมื่อไม่นานมานี้ทีมได้แก้บั๊กประหลาดตัวหนึ่ง มีเพียงสมาชิกในทีมคนเดียวที่ทำให้เกิดซ้ำได้ และเกิดขึ้นเฉพาะตอนอยู่ที่บ้าน

  • สาเหตุของบั๊ก

    • เมื่อคลิกปุ่ม 'เพิ่มเติม' บนเว็บไซต์ BBC เมนูควรจะเปิดขึ้นมา แต่บนจอนอกกลับไม่ทำงาน
    • ปัญหานี้เกิดขึ้นเฉพาะบนจอนอกเท่านั้น และใน Safari ไม่มีปัญหา

  • การทำให้ปัญหาเกิดซ้ำ

    • พบว่าบั๊กจะเกิดขึ้นก็ต่อเมื่อวางจอนอกไว้เหนือโน้ตบุ๊กเท่านั้น
    • สามารถทำให้ปัญหาเกิดซ้ำได้ด้วยการปรับตำแหน่งจอภาพในตั้งค่าของระบบปฏิบัติการ

  • กระบวนการสืบสวน

    • เบาะแสแรก: ใน Safari บั๊กไม่เกิดขึ้น
    • เบาะแสที่สอง: จะเกิดขึ้นก็ต่อเมื่อจอนอกอยู่ด้านบนและด้านซ้ายของจอหลัก
    • เบาะแสที่สาม: ใน Chrome และ Firefox ค่า screenX และ screenY เป็นค่าติดลบ
    • เบาะแสที่สี่: บั๊กจะเกิดขึ้นเฉพาะเมื่อ screenX และ screenY เป็นค่าติดลบ
    • เบาะแสที่ห้า: ใน Chrome และ Firefox มุมซ้ายบนของจอหลักคือพิกัด (0,0)

  • วิธีแก้

    • เปลี่ยนในฟังก์ชัน isInvokedByMouse ให้ตรวจสอบว่า screenX และ screenY ไม่ใช่ 0
    • แม้ปัญหาจะซับซ้อน แต่ทางแก้กลับเรียบง่าย
    • โค้ดยังควรต้องรีแฟกเตอร์ แต่แนวทางแก้ปัจจุบันก็เพียงพอแล้ว

  • บทเรียนที่ได้

    • ควรระวังการตั้งสมมติฐานเกี่ยวกับวิธีการทำงานของ API
    • แม้จะมีการทดสอบหลากหลายรูปแบบ แต่ก็ยังไม่พบบั๊กนี้
    • ทำให้ได้เรียนรู้ว่าการตั้งค่าจอภาพสามารถทำให้ประสบการณ์ผู้ใช้แตกต่างกันได้

  • แก้ไข 2024-11-19: มีความสับสนเกี่ยวกับการใช้ screenX และได้รีแฟกเตอร์คอมโพเนนต์นำทางแล้ว โดยจะอธิบายกระบวนการรีแฟกเตอร์และตอบคำถามต่าง ๆ ในบล็อกโพสต์ถัดไป

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2024-11-19
ความคิดเห็นจาก Hacker News

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

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

  • เสนอวิธีแก้ isInvokedByMouse โดยตรวจสอบว่า screenX และ screenY ไม่เท่ากับ 0

    • ต้องคำนึงถึงกรณีที่เมาส์อยู่ที่ 0,0 จริง ๆ
    • จำเป็นต้องมีการรีแฟกเตอร์เพิ่มเติมเพื่อลดความซับซ้อนของฟังก์ชันตัวจัดการอีเวนต์

  • ชื่นชมการลงทุนด้านการเข้าถึงของ BBC และการค้นพบบั๊กนี้

    • ตั้งคำถามว่าทำไมเมนูดรอปดาวน์จึงไม่เปิดอย่างสม่ำเสมอสำหรับผู้ใช้ทุกคน
    • สงสัยว่าเว็บเฟรมเวิร์กหรือเว็บคอมโพเนนต์จะช่วยแก้ปัญหาแบบนี้ได้หรือไม่

  • พยายามแก้ปัญหาโดยใช้ server-side template, CSS framework และ JS ให้น้อยที่สุด

    • แต่ไม่มั่นใจว่าสอดคล้องกับมาตรฐานการเข้าถึงของ BBC หรือไม่

  • ชี้ว่านี่เป็นบั๊กที่เกิดจาก heuristic ที่ผิดพลาด

    • เสนอว่าเวลาตรวจสอบพิกัด screenX และ screenY ควรเช็กค่าติดลบด้วย ไม่ใช่แค่ค่าบวก

  • ตั้งข้อสงสัยว่าเหตุใดเว็บไซต์จึงต้องใช้พิกัดหน้าจอเพื่อหาตำแหน่งเมาส์

    • เห็นว่าอีเวนต์ click เพียงอย่างเดียวก็ให้ข้อมูลเพียงพอแล้ว

  • สงสัยว่าทำไมเบราว์เซอร์จึงรายงานพิกัดต่างกันตามมอนิเตอร์ที่ใช้อยู่

    • กังวลว่าการที่ Web API มีข้อมูลลักษณะนี้อาจก่อให้เกิดความเสี่ยงด้านความปลอดภัยและการติดตามข้อมูล

  • ถามถึงวิธีที่ถูกต้องในการแยกแยะการคลิกด้วยเมาส์กับการคลิกผ่านคีย์บอร์ด

    • เสนอวิธีตั้งแฟลกจากอีเวนต์ mousedown และ keydown

  • เห็นว่าควรใช้พิกัด viewport แทนพิกัดหน้าจอ

    • มองว่าค่าติดลบใน screen space ไม่ใช่บั๊ก

  • ประทับใจที่มีการเขียนบล็อกนี้โดยไม่ต้องรอการอนุมัติจากฝ่ายบริหารและฝ่ายกฎหมายของ BBC