Chrome下拉菜单内容模糊但Firefox正常的问题求助

我遇到一个问题：当设置了max-height和overflow-y:auto的下拉菜单内容高度超过阈值时，Chrome里的内容会变得模糊，但Firefox完全正常。

相关代码如下：

HTML #

<div id="dropdown-assignees" class="dropbtn">Assignees</div>
<div id="assign-to" class="dropdown-content-assign">
    <!-- Dynamically filled content -->
</div>

CSS #

.dropdown-content-assign {
    max-height: 260px;
    overflow-y: auto;
    /* Other styling properties */
}

JavaScript #

function toggleAssigneeDropdown() {
    let dropdownContent = document.getElementById('assign-to');
    dropdownContent.style.display = dropdownContent.style.display === 'block' ? 'none' : 'block';
    // Additional code to handle arrow icons and adjustments
}

我已经试过以下方法，但都没解决问题：

• 用transform: translateZ(0);和will-change: transform;强制GPU加速
• 调整-webkit-font-smoothing属性
• 更新Chrome到最新版本，切换硬件加速设置

怀疑是Chrome的特定渲染bug，但不知道具体原因和解决办法，求有经验的人帮忙分析原因并给出修复方案。

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