当Firefox和Edge中出现HTML5验证气泡时，无法滚动

Question

我在字段和单选按钮上构建了具有HTML5验证的表单。在Chrome浏览器中一切正常，但在Firefox＆Edge中，验证气泡会阻止滚动页面，直到用户单击某处并且气泡消失为止。

这是我用于验证单选按钮的代码，例如：

<input type="radio" id="radio6" name="nationality" value="Dutch" required oninvalid="this.setCustomValidity('Select one of the options.')"
                                oninput="this.setCustomValidity('')"/>

<input type="radio" id="radio7" name="nationality" value="Belgian" oninput="document.getElementById('radio6').setCustomValidity('')"/>

该错误仅出现在第一个单选按钮上。如果在错误之后选中了第二个单选按钮，则第一个单选按钮的customValidity设置为“”。

我如何确保在屏幕上显示验证气泡时，用户可以像使用Chrome时一样继续滚动？