CODEWITHSUNDEEP
javascripthtmlcssgoogle-chrome
Christian Mazilu
Christian Mazilu

Reputation: 39

Blurry Content in Dropdown Menu in Chrome but Not in Firefox

I'm experiencing an issue where the content of a dropdown menu appears blurry in Google Chrome, but it displays fine in Firefox. This issue occurs when the dropdown exceeds a certain height, and I've implemented a max-height with overflow scrolling to accommodate the content. The problem persists in Chrome regardless of various attempted fixes, including adjustments to CSS properties related to rendering and hardware acceleration.

<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
}

Attempts to fix the issue:

I've tried applying CSS properties such as transform: translateZ(0); and will-change: transform; to force GPU acceleration, hoping it would improve the rendering, but it didn't help. Adjusting the -webkit-font-smoothing property didn't resolve the blurriness. Ensuring the latest version of Chrome is used and toggling the hardware acceleration setting in Chrome's settings. Despite these attempts, the content remains blurry in Chrome but is displayed correctly in Firefox. I suspect it might be a browser-specific rendering issue, but I'm at a loss for how to address it.

Question:

Has anyone encountered a similar issue or can provide insights into why this might be happening specifically in Chrome and how to fix it? Any suggestions or workarounds would be greatly appreciated.

Upvotes: 0

Views: 476

Answers (2)

MertHaddad
MertHaddad

Reputation: 573

Try to add this style for the list parent -don't forget to refactor the syntax to suit your app, this was for React component-

style={{
            transform: 'translate3d(0,0,0)',
            WebkitFontSmoothing: 'subpixel-antialiased',
            perspective: 1000,
            backfaceVisibility: 'hidden',
            willChange: 'transform',
            isolation: 'isolate',
            overscrollBehavior: 'contain'
          }}

Upvotes: 0

Pabs
Pabs

Reputation: 9

Try setting -webkit-backface-visibility: hidden; backface-visibility: hidden; at css element, had the same issue some time ago with Chrome and Edge and this solved my problem. More info here

Upvotes: 0

Related Questions