I've encountered an issue with a dropdown menu in Google Chrome where the content appears blurry, while it displays correctly in Firefox. The problem arises when the dropdown exceeds a certain height, and I've tried setting a max-height with overflow scrolling to accommodate the content. Despite trying various solutions, including adjusting CSS properties related to rendering and hardware acceleration, the issue persists in Chrome.
<div id="dropdown-assignees" class="dropbtn">Assignees</div>
<div id="assign-to" class="dropdown-content-assign">
<!-- Dynamically filled content -->
</div>
.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
}
Potential Fixes:
I attempted to resolve the issue by applying CSS properties such as transform: translateZ(0); and will-change: transform; to trigger GPU acceleration for improved rendering, but this did not solve the problem. Modifying the -webkit-font-smoothing property also failed to eliminate blurriness. I made sure to use the latest version of Chrome and adjust the hardware acceleration setting in Chrome's preferences, yet the content remains unclear in Chrome compared to Firefox. It seems like a browser-specific rendering issue, and I'm struggling to find a solution.
Query:
Has anyone else faced a similar problem or can offer insights into why this might be occurring specifically in Chrome? Any recommendations or workarounds would be greatly appreciated.