Chrome浏览器单选按钮调用reportValidity校验提示无法立即显示问题

这是Chrome浏览器已知存在多年的渲染Bug，核心原因是单选按钮组的必填校验气泡的锚点定位逻辑，和按钮点击后的焦点持有状态冲突，导致气泡的绘制被阻塞，直到焦点离开按钮后才会正常渲染。该问题仅出现在Chrome内核浏览器中，Firefox、Edge没有相关实现缺陷。

以下方案均兼容全浏览器，不会影响其他浏览器的正常校验表现：

• 方案1：调用校验前主动给单选按钮设置焦点
  修改校验函数，先让单选按钮获得焦点，再触发校验：

function validateRadios() {
    const targetRadio = document.getElementById('first-radio');
    targetRadio.focus();
    targetRadio.reportValidity();
}

• 方案2：异步触发校验，避开焦点冲突
  用0延迟的setTimeout把校验逻辑放到下一个宏任务执行，绕过Chrome的渲染阻塞：

function validateRadios() {
    const targetRadio = document.getElementById('first-radio');
    setTimeout(() => targetRadio.reportValidity(), 0);
}

• 方案3：使用原生form表单触发校验（最稳定）
  将所有表单元素包裹在<form>标签内，按钮设置为type="submit"，通过监听表单的submit事件触发原生校验，无需手动调用reportValidity：
  HTML代码修改为：

<html>
<head>
</head>
<body>
    <form id="validate-form">
        <input type="radio" name="radios" id="first-radio" value="option1" required>
        <label for="first-radio">
            Radio 1
        </label>
        <input type="radio" name="radios" id="second-radio" value="option2">
        <label for="second-radio">
            Radio 2
        </label>
        <input id="txt-box" type="text" required />
        <button id="btn-next" type="submit">
            Btn Next
        </button>
    </form>
    <script src="radios.js"></script>
</body>
</html>

JS代码修改为：

(function () {
    document.getElementById('validate-form').addEventListener('submit', function(e) {
        e.preventDefault(); // 不需要表单默认跳转行为可保留该行
        // 校验通过后的业务逻辑写在这里
    });
})();

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