เมื่อ IE (9) กระพริบวูบวาบ

เรื่องของเรื่องคือผมใช้ GModal แสดงกรอบ register และใช้ Tooltip แสดงบน GModal อีกที สำหรับบนบราวเซอร์อื่นๆทั่วไปก็สามารถแสดงผลได้ตามปกติครับ มาติดเอาอีตอนทดสอบบน IE9 ปัญหาที่ผมเจอก็คือ

1. IE มีอาการกระพริบทั้งหน้า ในขณะที่มีการ FadeIn หรือ FadeOut ของ Tooltip
2. เมื่อเลื่อนเมาส์ไปบน Tooltip ตัว GModal จะหาย รวมถึง Tooltip ด้วย

ปัญหานี้ผมทดสอบเกือบวันนะครับ ทีแรกคิดว่าเกิดจาก script ที่ใช้ เนื่องจากมีการเปลี่ยนแปลง script พอสมควร แต่หลังจากทดสอบจนหนำใจแล้วกลับพบว่าปัญหาอยู่ที่ CSS ของ IE

<body>
    <div id=gmodal></div>
    <div id=tooltip></div>
</body>

ด้านบนเป็นโครงสร้างคร่าวๆของโค้ดที่เป็นปัญหานะครับ gmodal ถูกสร้างมาจาก GModal และ tooltip ถูกสร้างมาจาก GTooltip โดยที่ทั้ง gmodal และ gtooltip จะมี position เป้น absolute และ gtooltip จะแสดงอยู่บน gmodal อีกที (โค้ดที่เป็นปัญหาคือหน้า register ของเว็บนี้แหละครับ)

ผมไม่ทราบสาเหตุที่แท้จริงนะครับ รู้เพียงแค่วิธีแก้ไข ซึ่งวิธีแก้ไขก็ง่ายมากครับ

body {
    position: relative;
}

จริงๆแล้วผมแนะนำให้ใส่ position: relative ไว้เสมอนะครับ เนื่องจาก body ควรมีค่านี้อยู่แล้ว
ผู้เขียน goragod โพสต์เมื่อ 04 ม.ค. 2555 เปิดดู 10,030 ป้ายกำกับ XHTMLCSS
^