Размытый контент в раскрывающемся меню в Chrome, но не в Firefox ⇐ CSS

[Anonymous]

У меня возникла проблема: содержимое раскрывающегося меню в Google Chrome выглядит размытым, но в Firefox оно отображается нормально. Эта проблема возникает, когда раскрывающийся список превышает определенную высоту, и я реализовал максимальную высоту с прокруткой переполнения для размещения содержимого. Проблема сохраняется в Chrome, несмотря на различные попытки исправления, включая корректировку свойств CSS, связанных с рендерингом и аппаратным ускорением.

Код: Выделить всё

Assignees

Код: Выделить всё

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

Код: Выделить всё

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
}

Попытки решить проблему:
Я пробовал применить свойства CSS, такие как Transform: TranslateZ(0); и воля-изменение: трансформация; чтобы принудительно ускорить графический процессор, надеясь, что это улучшит рендеринг, но это не помогло.
Настройка свойства -webkit-font-smoothing не устранила размытость.
Убедитесь, что установлена ​​последняя версия Chrome. и переключение параметра аппаратного ускорения в настройках Chrome.
Несмотря на эти попытки, контент остается размытым в Chrome, но отображается правильно в Firefox. Я подозреваю, что это может быть проблема с рендерингом, специфичная для браузера, но я не знаю, как ее решить.
Вопрос:
Имеется кто-нибудь сталкивался с подобной проблемой или может рассказать, почему это может происходить именно в Chrome и как это исправить? Будем очень признательны за любые предложения или обходные пути.

Подробнее здесь: https://stackoverflow.com/questions/780 ... in-firefox