Verschwommener Inhalt im Dropdown-Menü in Chrome, aber nicht in Firefox ⇐ HTML

[Guest]

Ich habe ein Problem, bei dem der Inhalt eines Dropdown-Menüs in Google Chrome verschwommen erscheint, in Firefox jedoch einwandfrei. Dieses Problem tritt auf, wenn das Dropdown-Menü eine bestimmte Höhe überschreitet und ich eine maximale Höhe mit Überlauf-Scrolling implementiert habe, um den Inhalt unterzubringen. Das Problem besteht in Chrome weiterhin, trotz verschiedener Lösungsversuche, einschließlich Anpassungen der CSS-Eigenschaften im Zusammenhang mit Rendering und Hardwarebeschleunigung.

Code: Select all

Assignees

Code: Select all

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

Code: Select all

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
}

Versuche, das Problem zu beheben:
Ich habe versucht, CSS-Eigenschaften wie transform: translatorZ(0); anzuwenden. und Willensänderung: transformieren; um die GPU-Beschleunigung zu erzwingen, in der Hoffnung, dadurch das Rendering zu verbessern, aber es hat nicht geholfen.
Das Anpassen der Eigenschaft -webkit-font-smoothing hat die Unschärfe nicht behoben.
Es wird sichergestellt, dass die neueste Version von Chrome vorhanden ist verwendet und die Hardwarebeschleunigungseinstellung in den Chrome-Einstellungen umgeschaltet.
Trotz dieser Versuche bleibt der Inhalt in Chrome verschwommen, wird aber in Firefox korrekt angezeigt. Ich vermute, dass es sich um ein browserspezifisches Rendering-Problem handeln könnte, aber ich weiß nicht, wie ich es beheben soll.
Frage:
Hat Ist jemand auf ein ähnliches Problem gestoßen oder kann er Einblicke geben, warum dies speziell in Chrome auftritt und wie man es beheben kann? Für Vorschläge oder Problemumgehungen wären wir sehr dankbar.