SVG元素添加foreignObject导致可调整元素resize handle消失问题

在SVG元素中添加foreignObject会隐藏可调整大小元素的resize handle。该resize handle仍可正常工作，仅在滚动条出现时才会显示。

正常显示resize handle的代码 #

<div style="height: 200px; width: 200px; resize: vertical; overflow: auto; background-color: #dfd">
    <svg viewbox = "10 10 50 50" height="100" style="background-color: #fdd">
        <!-- <foreignObject x="20" y="40" width="10" height="10" style="background-color: #adf;"></foreignObject> -->
    </svg>
</div>

无法显示resize handle的代码 #

<div style="height: 200px; width: 200px; resize: vertical; overflow: auto; background-color: #dfd">
    <svg viewbox = "10 10 50 50" height="100" style="background-color: #fdd">
        <foreignObject x="20" y="40" width="10" height="10" style="background-color: #adf;"></foreignObject>
    </svg>
</div>

请问是否存在我忽略的细节？

内容的提问来源于stack exchange，提问作者HHFox