Css 创建新画布后的奇怪Chrome行为

在我创建了一个新画布之后，div中具有绝对或相对位置的元素（也具有相对或绝对位置）没有正确渲染，包括来自chrome的“range”类型输入。只有当我将鼠标放在画布上时，这些元素才会移动到正确的位置。在Firefox中，一切正常。有什么办法解决这个问题吗

更新：
根据要求，这里有一个小演示：

---

由于某种奇怪的原因，我无法从我的页面中获得确切的行为。但是离得够近了

谢谢你的帮助！当我做演示时，我意识到当画布不在菜单上方时，一切都很好。仍然不知道到底是什么问题，但似乎如果带有相对/绝对的div与画布重叠（即使不可见），webkit就会出现渲染问题，天知道为什么。解决这个问题的最好办法是改变页面的设计。但就我而言，这不是一个选择。所以，我想办法强迫broswer重画。发现这个问题:

这个解决方案，即使是一个肮脏的补丁，也能很好地工作。我仍然想知道为什么不能在webkit上用相对/绝对的div覆盖画布。如果你们知道原因并向我解释，我将不胜感激

---

再次感谢

任何效果的演示页面都会很有帮助。我只是用一个演示更新了这个问题。如果你们试一试，我会非常感激的。