Mac Chrome 外付マウスをつけた時だけ表示が荒ぶる

rotate.html

<style>
body { margin:0; }
canvas { box-shadow:0 0 4px inset; width:100%; }
div { position:fixed; left: 50%; animation: rotate 1s linear infinite; }
@keyframes rotate { 100% { transform:rotate(360deg); } }
</style>
<div>a</div>
<canvas>
<script>
const canvas = document.querySelector('canvas')
canvas.width = innerWidth
canvas.height = innerHeight + 2
</script>