Issue with Chrome Version 126's Scrolled Page Printing

ปัญหา
 
ช่วงกลางเดือนมิถุนายน 2024 ได้รับแจ้งจากผู้ใช้รายหนึ่งว่า พิมพ์บิลลงฟอร์มแล้วตำแหน่งบรรทัดเคลื่อนไปจากเดิม
 
ทีมซัพพอร์ทจึงพยายามตรวจและปรับปรุงโค้ดในส่วนของ CSS ที่ใช้ในฟอร์มนั้นให้ตรงกับฟอร์มของสาขาอื่นที่คล้ายกันและไม่มีปัญหา
 
หลังจากนั้นก็เริ่มมีรายงานปัญหาจากรายอื่นเพิ่ม รวมทั้งมีปัญหากับฟอร์มบิลที่แตกต่างกันหลายแห่งด้วย อาการคล้ายกับเกิดโรคระบาดขึ้นมาซะแล้ว การสอบสวนจึงต้องลงละเอียดมากขึ้น ข้อมูลที่ได้จากผู้ใช้มีดังนี้
 
กับผู้ใช้คนเดียวกันสั่งพิมพ์ฟอร์ม บางครั้งก็เคลื่อน บางครั้งก็ใช้ได้
 
มีผู้ใช้บางคนสั่งพิมพ์ฟอร์มเดียวกันไม่เป็น
 
มีผู้ใช้รายหนึ่งทดลองย้อนใช้โปรแกรมรุ่นก่อนหน้านั้นแล้วแจ้งว่าใช้ได้
 
ผู้ใช้รายเดียวกันหลังจากอัพเดท Chrome เป็นเวอร์ชั่นล่าสุดแล้วแจ้งว่าใช้ได้
 
ผู้ใช้อีกราย ทั้งย้อนใช้โปรแกรมรุ่นก่อนหน้าและอัพเดท Chrome ก็ยังใช้ไม่ได้
 
สมาชิกในทีมหารือกัน ค่อนข้างให้น้ำหนักว่าปัญหาเกิดจาก Chrome มากกว่าเกิดจากโปรแกรม แต่ก็ยังมีเงื่อนงำขัดแย้งกันเองที่ไม่สามารถอธิบายได้
 
ทำไมจึงเกิดปัญหาเฉพาะบางคน แม้จะใช้ Chrome เวอร์ชั่นเดียวกัน
 
ทำไมคนหนึ่งทดลองเปลี่ยนรุ่นโปรแกรมแล้วใช้ได้ แต่อีกคนใช้ไม่ได้
 
อีกทางหนึ่งที่อาจเป็นไปได้คือ เนื่องจากฟอร์มที่มีปัญหานั้นออกแบบมานานหลายปีแล้ว อาจมี CSS บางค่าที่อาจล้าสมัยจนใช้ไม่ได้ มีนิยามหรือวิธีการใช้ไม่เหมือนเดิมกับ browser รุ่นใหม่
 
คำถามที่ถูกต้องจะนำไปสู่คำตอบ
 
เนื่องจากไม่สามารถระบุอาการได้แน่ชัด และอุปสรรคที่สำคัญที่สุดคือทีมซัพพอร์ทเองก็ไม่สามารถทดลองทำซ้ำให้เกิดปัญหาเหมือนกับผู้ใช้ได้ จึงต้องลองหาข้อมูลโดยใช้คำค้นหลายอย่างไปเรื่อยๆ พร้อมทั้งตรวจสอบประวัติการอัพเดทของ Chrome ว่ามีเรื่องไหนที่เกี่ยวข้องบ้าง

ในที่สุดเมื่อใช้คำค้น "chrome issues 126" แล้วเจอหนึ่งคำตอบ เป็น print issue ที่เพิ่งเกิดขึ้น 7 วันที่แล้ว
 
เข้าไปดูรายละเอียดแล้วพบว่า มีอาการใกล้เคียงกัน เมื่อสั่งพิมพ์แล้วบรรทัดข้อความขยับเลื่อนขึ้นไปชิดหัวกระดาษโดยไม่รู้สาเหตุ ปัญหานี้เกิดขึ้นตั้งแต่เวอร์ชั่น 126.0.6478.62 ไปจนถึงล่าสุด (ณ วันที่เขียนนี้) ลงท้ายด้วย .115 บางความเห็นก็บอกว่าบางเครื่องมีอาการ บางเครื่องไม่มีเหมือนกันอีกด้วย
 
I have the same issue, but still see it with version .115. My home laptop is fine and has had both .62 and .115 versions. It seems to be occuring on my work laptop and it is happening on many (I'm not sure if all) of my co-workers computers. We are all on Windows 10 Machines of various ages.
 
ไล่อ่านต่อไปเรื่อย ๆ ก็มีคำแนะนำว่า เกิดจากการเลื่อน (scroll) หน้าเว็บก่อนสั่งพิมพ์ ทำให้บรรทัดข้อความต่าง ๆ เลื่อนไปด้วย มีคนบอกวิธีแก้ไว้ด้วย ต้องตามไปดูใน Stack Overflow
 
I added the code below to solve this problem in every way anyone tries to print in Chrome. window.addEventListener('beforeprint', function (event) { window.scrollTo(0, 0) });
 
ทดสอบซ้ำ
 
กลับมาที่โปรแกรมของเรา..
 
การแก้ปัญหาจะต้องเริ่มต้นจาก หาวิธีทดลองทำซ้ำแล้วเกิดปัญหาเหมือนเดิมทุกครั้ง จึงพิสูจน์ได้ว่า สิ่งนี้เป็นสาเหตุของปัญหา

ผมเริ่มต้นด้วยการทดลองทำ ว่าหาก scroll ก่อนสั่งพิมพ์แล้วจะมีอาการผิดปกติเหมือนกันทุกครั้งไหม
 
เปิดหน้าต่างพิมพ์ฟอร์มเดียวกันเทียบคู่กัน หน้าต่างซ้ายไม่ได้ scroll และหน้าต่างขวา scroll ฟอร์มนั้นลงมาด้านล่าง
 
ลองกดปุ่มสั่งพิมพ์ทั้งสองหน้าต่าง เทียบกันแล้วตำแหน่งของข้อความหัวกระดาษเคลื่อนไม่ตรงกัน เหมือนกับที่ทุกคนเจอใน Chrome Issue จริง

เมื่อรู้สาเหตุ คำตอบของเงื่อนงำที่ขัดแย้งทีแรกก็กระจ่างทันที
 
กับผู้ใช้คนเดียวกันสั่งพิมพ์ฟอร์ม บางครั้งก็เคลื่อน บางครั้งก็ใช้ได้ A: ขึ้นอยู่ว่า scroll ก่อนสั่งพิมพ์หรือไม่
 
มีผู้ใช้บางคนสั่งพิมพ์ฟอร์มเดียวกันไม่เป็น A: เป็นไปได้ที่คนนั้นเขาไม่เคย scroll ก่อนพิมพ์
 
มีผู้ใช้รายหนึ่งทดลองย้อนใช้โปรแกรมรุ่นก่อนหน้านั้นแล้วแจ้งว่าใช้ได้ A: เพราะตอนทดสอบสั่งพิมพ์โดยไม่ scroll
 
ผู้ใช้รายเดียวกันหลังจากอัพเดท Chrome เป็นเวอร์ชั่นล่าสุดแล้วแจ้งว่าใช้ได้ A: เพราะตอนทดสอบสั่งพิมพ์โดยไม่ scroll
 
ผู้ใช้อีกราย ทั้งย้อนใช้โปรแกรมรุ่นก่อนหน้าและอัพเดท Chrome ก็ยังใช้ไม่ได้ A: เพราะตอนทดสอบ scroll ก่อนสั่งพิมพ์
 
หลังจากที่มะงุมมะหรา ติดค้างปัญหาโดยไม่มีคำอธิบายมาเป็นสัปดาห์จนผู้ใช้เริ่มไม่พอใจ โชคดีที่หาสาเหตุเจอจนได้ บทเรียนที่ได้จากคราวนี้ คือ หาทางตั้งคำถามให้ถูก หาก่อนว่ามีเพื่อนร่วมโลกเจอเหมือนกันบ้างไหม
 
เมื่อรู้สาเหตุการแก้ปัญหาขั้นต่อไปก็ง่าย ชี้แจงให้ผู้ใช้เข้าใจ หาก scroll จอดูด้านล่างแล้วอย่าลืมเลื่อนกลับมาบนสุดก่อนสั่งพิมพ์ แล้วก็รอจนกว่า Chrome จะอัพเดทเวอร์ชั่นที่แก้ bug นี้
 
อ้างอิง
 
Chrome : Print Issue when printing in version 126.0.6478.62 https://support.google.com/chrome/thread/279981342
 


 
Stack Overflow : Code to solve this problem https://stackoverflow.com/a/78649323