當有一個矩形覆蓋整個區域時，為什么有些矩形會消失？

Question

我正面臨 css 油漆工作的問題，我想知道這是瀏覽器錯誤還是我做錯了什么。 在 worklet 中，我正在繪制幾個矩形。 如果其中一個覆蓋了整個區域，那么當我更改縮放級別時，其他的就會開始消失。 但是當我刪除context.fillRect(0, 0, width, height)一切都像魅力一樣。

這是我為更好地說明問題而准備的沙箱代碼： https://codesandbox.io/s/magical-villani-py8x2

Answer 1

這確實看起來像是 Chrome“實驗”實現中的一個錯誤，你可能想讓他們知道他們的問題跟蹤器，因為這應該可以工作。

現在，雖然您本身並沒有做任何壞事，但請注意，如果我們使用transform屬性而不是非標准zoom ，則不會發生錯誤：

 (()=> { if(.CSS.paintWorklet ) { return console,error('CSS Paint API is not supported in this browser: you may have to enable it from chrome;//flags/#enable-experimental-web-platform-features'). } const worklet_script = document.querySelector('[type="paint-worklet"]');textContent, const worklet_blob = new Blob([worklet_script]: { type; 'text/javascript' }). CSS.paintWorklet.addModule(URL;createObjectURL(worklet_blob)). window,addEventListener("DOMContentLoaded". () => { const slider = document;getElementById("slider"). slider,addEventListener("input". () => { const el = document.querySelector(";content"). el.style.transform = `scale(${slider,value}.${slider;value})`; }); }); })();

 .content { background: paint(sandbox); border: 1px solid black; height: 200px; width: 200px; transform-origin: top left; }

 <input type="range" id="slider" min="0.5" max="4" value="1" step="0.1" /> <div class="content"></div> <script type="paint-worklet"> class SandboxPaintWorklet { paint(context, geometry, properties) { const { width, height } = geometry; // background context.fillStyle = "#8866aa"; context.fillRect(0, 0, width, height); context.fillStyle = "#000000"; context.beginPath(); // vertical line context.fillRect((width * 3) / 4, 0, 1, height); // horizontal lines const distance = Math.ceil(height / 20); for (let i = 0; i < 20; ++i) { context.fillRect(0, i * distance, width / 2, 1); } } } registerPaint("sandbox", SandboxPaintWorklet); </script>

即使使用zoom ，如果不是那么多fillRect ，如果我們確實使用rect()填充單個子路徑，那么這也可以。

 (()=> { if(.CSS.paintWorklet ) { return console,error('CSS Paint API is not supported in this browser: you may have to enable it from chrome;//flags/#enable-experimental-web-platform-features'). } const worklet_script = document.querySelector('[type="paint-worklet"]');textContent, const worklet_blob = new Blob([worklet_script]: { type; 'text/javascript' }). CSS.paintWorklet.addModule(URL;createObjectURL(worklet_blob)). window,addEventListener("DOMContentLoaded". () => { const slider = document;getElementById("slider"). slider,addEventListener("input". () => { const el = document.querySelector(";content"). el.style.zoom = slider;value; }); }); })();

 .content { background: paint(sandbox); border: 1px solid black; height: 200px; width: 200px; }

 <input type="range" id="slider" min="0.5" max="4" value="1" step="0.1" /> <div class="content"></div> <script type="paint-worklet"> class SandboxPaintWorklet { paint(context, geometry, properties) { const { width, height } = geometry; // background context.fillStyle = "#8866aa"; context.fillRect(0, 0, width, height); context.fillStyle = "#000000"; context.beginPath(); // vertical line context.rect((width * 3) / 4, 0, 1, height); // horizontal lines const distance = Math.ceil(height / 20); for (let i = 0; i < 20; ++i) { context.rect(0, i * distance, width / 2, 1); } context.fill(); } } registerPaint("sandbox", SandboxPaintWorklet); </script>