去年在工作中偶然发现的火狐浏览器上的一个小 Bug，在这里分享给大家，减少踩坑。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.list {
background-color: blanchedalmond;
}
.list-item {
width: 50px;
height: 25px;
background-color: coral;
}
foreignObject {
overflow: visible;
}
</style>
</head>
<body>
<svg>
<foreignObject width="300" height="25">
<div class="list">
<div class="list-item">a</div>
<div class="list-item">b</div>
</div>
</foreignObject>
</svg>
<script>
setTimeout(() => {
let list = document.querySelector('.list');
let c = document.createElement('div')
c.innerHTML = 'a';
c.classList.add('list-item')
list.appendChild(c);
}, 0);
</script>
</body>
</html>
谷歌浏览器（版本 89.0.4389.90（正式版本） （64 位））
火狐浏览器（87.0 (64-bit)）
给 foreignObject 设置了 overflow: visible 属性之后，它应该完整显示出 a, b, c，但是可以看到在火狐浏览器上，只显示了 a, b。项目里的场景刚好就和例子中的场景类似，在火狐浏览器上运行的时候，就会有交互上的问题。
如果去掉 setTimeout，或者一开始 overflow 设为 hidden，再在 setTimeout 里用 js 设为 visible，两个浏览器的显示效果就是完全一样的。
给火狐提的 Bug 链接 bugzilla.mozilla.org/show_bug.cg…
