【現象】
Safariブラウザでcanvasに対して任意の描画をした後、clearRect()を実行します。
その後、canvasの親divに対して visibility: hidden を設定すると、消したはずの描画が復活します。
但し、親divは正常に visibility: hidden が働いているので描画されなくなります。
また、この現象はブラウザの拡大率が影響をしているようです。
少なくとも後述のリスト内のMacbookAirでは、拡大率が100%の場合にのみ発生しています。
この現象は過去のバージョンでは起きてないようです。
このバグを修正する予定はありますか?
【機種】
機種は以下のリストを確認してください。
Model
OS&Version
Y/N
version
MacbookAir M2 2022
macOS Sonoma 14.4.1
y
17.4.1
Mac Studio 2022 Apple M1 Max
macOS Monterey 12.5
n
16.0
MacBook Air M1 2020
macOS Sonoma 14.3.1
n
17.3.1
iPadPro gen6
iPadOS 17.4.1
y
-
iPad gen10
iPadOS 17.4.1
n
-
【デモ】
現象を確認するためのデモは以下のHTMLファイルを保存してブラウザで開いてください。
再現手順はボタンを draw -> clear -> hide の順番に押してください。
黄色の親divが非表示になるのに対し、canvasからclearしたはずの黒い四角が表示されます。
<html>
<body onload="onLoad()">
<div id="parent" style="background-color: yellow;">
<canvas id="canvas"></canvas>
</div>
<button onclick="drawCanvas()">draw</button>
<button onclick="clearCanvas()">clear</button>
<button onclick="showCanvas()">show</button>
<button onclick="hideCanvas()">hide</button>
<script>
let parent
let canvas
let context2d
function onLoad() {
parent = document.getElementById("parent")
canvas = document.getElementById("canvas")
context2d = canvas.getContext('2d')
}
function drawCanvas() {
context2d.fillRect(0, 0, 100, 100)
}
function clearCanvas() {
context2d.clearRect(0, 0, canvas.width, canvas.height)
}
function showCanvas() {
parent.style.visibility = "visible"
}
function hideCanvas() {
parent.style.visibility = "hidden"
}
</script>
</body>
</html>