home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

HTML5 Canvas & z-index issue ใน Google Chrome

เมื่อเราใช้ z-index กับ canvas ที่มี position:fixed จะทำให้ Chrome render องค์ประกอบอื่นๆ ที่มี position:fixed ผิดปกติ ปัญหานี้เกิดขึ้นเฉพาะเมื่อ canvas ใหญ่กว่า 256x256 px

ห่อ h1 และ canvas ด้วย fixed div แล้วปัญหาจะหาย:

<div id='fixcontainer'>
  <h1>Test Title</h1>
  <canvas id="backgroundCanvas" width="1000" height="300"></canvas>
</div>

CSS ดังนี้:

h1 { position: fixed; }
body { height: 1500px; }
canvas { position: fixed; z-index: -10; }