chrome: เหตุใด css 3d จึงแปลงองค์ประกอบขนาดใหญ่ด้วยขนาดการแปลง ‹ 0 ทำให้เกิดข้อผิดพลาดหน้าจอสีขาว

ฉันมีปัญหากับบริเวณของหน้าจอกลายเป็นสีขาวในโครเมียม ด้านล่างนี้เป็นกรณีทดสอบแบบง่าย จากการทดสอบ ปรากฏว่าการรวมกันของสเกลการแปลงและการหมุนทำให้เกิดปัญหา หากต้องการจำลองปัญหาโดยใช้องค์ประกอบ html เพียงไม่กี่องค์ประกอบ ฉันจึงพูดเกินจริงในสถานการณ์นี้ และใช้สี่เหลี่ยมจัตุรัสขนาด 5,000px ที่ลดขนาดลง 0.125

โปรดสังเกตว่ามีเพียงการทดสอบครั้งแรกเท่านั้นที่สร้างข้อผิดพลาดa และจะไม่ทำซ้ำใน Firefox

โดยลดขนาดลง: http://jsfiddle.net/AxkEj/46/embedded/result/

   width: 5000px;
   height: 5000px;
   -webkit-transform: scale(0.125);

ไม่มีขนาด: http://jsfiddle.net/47SmB/1/embedded/result/

   width: 625px;
   height: 625px;

ด้วยการขยายขนาด: http://jsfiddle.net/YpfPt/2/

   width: 50px;
   height: 50px;
   -webkit-transform: scale(10);

ด้วยการซูมแทนมาตราส่วน:

    width: 5000px; 
    height: 5000px;
    zoom: 0.125;

http://jsfiddle.net/AxkEj/47/

รายงานข้อผิดพลาดไปยัง webkit พร้อมการตอบกลับ

ข้อกำหนดการแปลง css รวมส่วนด้านล่างนี้ซึ่งอาจให้ความกระจ่างเกี่ยวกับปัญหา:

เมทริกซ์การแปลง 3 มิติที่สะสมคือเมทริกซ์ 4 × 4 ในขณะที่วัตถุที่จะแปลงเป็นกล่องสองมิติ ในการแปลงแต่ละมุม (a, b) ของกล่อง ต้องใช้เมทริกซ์กับ (a, b, 0, 1) ก่อน ซึ่งจะส่งผลให้เกิดจุดสี่มิติ (x, y, z, w) สิ่งนี้จะถูกแปลงกลับเป็นจุดสามมิติ (x′, y′, z′) ดังนี้:

If w > 0, (x′, y′, z′) = (x/w, y/w, z/w).

ถ้า w = 0, (x′, y′, z′) = (x ⋅ n, y ⋅ n, z ⋅ n) n เป็นค่าที่ขึ้นกับการใช้งานที่ควรเลือกเพื่อให้ x′ หรือ y′ มีขนาดใหญ่กว่าขนาดวิวพอร์ตมาก หากเป็นไปได้ ตัวอย่างเช่น (5px, 22px, 0px, 0) อาจกลายเป็น (5000px, 22000px, 0px) โดยที่ n = 1,000 แต่ค่า n นี้จะน้อยเกินไปสำหรับ (0.1px, 0.05px, 0px, 0) ข้อกำหนดนี้ไม่ได้กำหนดค่าของ n อย่างแน่นอน ตามแนวคิดแล้ว (x′, y′, z′) อยู่ในทิศทางที่ไกลอย่างไม่สิ้นสุด (x, y, z)

ถ้า w ‹ 0 สำหรับทั้งสี่มุมของกล่องที่ถูกแปลง กล่องจะไม่ถูกเรนเดอร์

อัปเดต: ข้อผิดพลาดไม่เกิดขึ้นซ้ำใน explorer เช่นกัน ดูซอด้านล่าง:

http://jsfiddle.net/AxkEj/48/