primefaces
Chromium: Overlays not rendering correctly
Describe the bug
We are experiencing an issue with PrimeReact dropdowns in the Chrome browser. When the browser's inspect dock is open (either docked or in a separate window), the dropdown values fail to display.
This issue does not occur in other browsers such as Edge or Safari. It appears to be specific to Chrome and may have been introduced after recent updates to the browser.
Could someone assist in resolving this? Any guidance or workaround would be appreciated.
Reproducer
No response
System Information
Google Chrome
Version 141.0.7390.77 (Official Build) (64-bit)
Prime React version 10.8.4
Component: Dropdown
Steps to reproduce the behavior
Right click -> Inspect Now try to open dropdown values. It will not show dropdown options
Expected behavior
After opening inspect still we should be able to see dropdown values. As on edge and safari
@Vedgaurav
I experienced the same issue and wasted a good two days trying to figure out what had changed with my project. Coincidentally, I had made a lot of changes, so it was a red herring until I figured out that the issue was the browser.
The issues I saw were the Dropdowns not populating on initial render, as well as the Panel component not properly calculating its height, so it would open downward instead of upward. Only on second render, these issues would fix themselves.
I was using Brave at the time, but when switching to Chrome, Vivaldi (Chromium), FireFox, Safari, and DuckDuckGo, none of these browsers exhibited the initial render issue.
Meanwhile, Brave received another update (Brave 1.8.3.112 / Chromium 141.0.7390.70) and I can't reproduce the issue anymore. As for Chrome, I'm on the latest version 141.0.7390.108, which is slightly ahead of Brave, and everything works fine there too. Looks like your next browser update should fix the issue for you as well.
@Vedgaurav
I have been experiencing this issue as well. All Dropdowns as well as many OverlayPanels stop working when Google Chrome dev tools are open.
@sassomedia I have updated my Chrome to version 141.0.7390.108 and am still experiencing the issue when I open the dev tools.
@BenLoerick Are you seeing the issue in any other browser? I did not, my issues were solely related to Brave. So I stopped using it for the time being. Even though Brave seems to be fixed now, I think I will stick with using Vivaldi, another Chromium variant.
@sassomedia I have experienced it on Google Chroma and Edge browsers. I have also experienced it on multiple repositories using PrimeReact, even with a simpler barebones repository.
Try with Chromium itself, or any other Chromium-based browser. Also, FireFox and Safari. However, this appears to be a recent browser issue, not related to PrimeReact.
On Chrome 141.0.7390.108 and issue is still occurring. Cannot reproduce in Firefox.
Also extends to Tab components, radio buttons, and menu popups. Everyone on my team started noticing it after a Chrome update few weeks ago.
I see there is an open Chromium issue, but seems so far they have not been able to reproduce https://issues.chromium.org/issues/451652361
Just had a troubleshooting session with a colleague who experienced this issue with components from the Semantic-UI library, so not PrimeReact related. It surfaced with the latest version of Chrome (141.0.7390.108), but worked fine for him in the latest version of Brave (141.0.7390.70).
I don't see the problem with neither of these browser versions anymore. Something must have happened with that Chromium code, maybe corrupted or cached during distribution. Can't really explain how this is affecting different Chromium browsers differently.
I am also facing this issue, and actually to me it looks that it does not only affect the dropdown component, but also dialogs and other similar floating components. Anyways, being on the latest chrome version, what I am noticing is that, the issue is still actually happening but only as long as I keep the dev tools (F12) opened. When I close the dev tools, all is good - all menus, dropdowns, dialogs, get opened correctly.
This happens with any component appended to body. Its there, but its not visible. Toggling any css property would cause a repaint and it would then appear. Updating to latest chrome does help a bit, but there are still issues
Same problem, a lots of trouble debugging with chrome, please anyone have resolved?
I marked this bug as Chrome specific I assume its not happening in Firefox?
No in Firefox al works fine. In Chrome with debug console opened all components requiring animation like dialogs, dropdown menus, etc...doesn't work. If you're looking to the body console you see the body changes but the rendering freezing
I am seeing the same behavior. What I also found out: the element you expect to see is actually there, you can find it in the elements tab of Chrome DevTools (way at the bottom) and if you increase the z-index it suddenly pops up.
I see reported issue: https://issues.chromium.org/issues/451652361 However, chromium team was not able to reproduce
Maybe someone has some easily reproducible example that could be shared in some code sandbox?
Similar issue in Angular: https://issues.chromium.org/issues/450704373
@melloware
I marked this bug as Chrome specific I assume its not happening in Firefox?
As noted above, this issue may appear in various Chromium variants. It is not persistent, a browser update may resolve it or another variant may not have it. But more importantly, this is not an issue with PrimeReact, as other libraries like Semantic-UI and apparently, Angular Material exhibit the same issue. This is a specific Chromium rendering issue.
OK marked this as WontFix but will leave it open until people report back Chromium has fixed the issue.
Message in Chromium support:
"Expect the fix to arrive in Canary ~tomorrow, and in Stable around mid-January: https://chromiumdash.appspot.com/schedule"
Is there a workaround to fix this and the icon problem (https://github.com/primefaces/primereact/issues/8362)?
Is there a workaround to fix this and the icon problem (#8362)?
the problem seems to be in the rendering of:
.pi:before { --webkit-backface-visibility: hidden; backface-visibility: hidden; }
in primeicons.css
after various test a workaround is to add
display: inline-block;
in the class:
primeicons_override.css
.pi:before { display: inline-block; --webkit-backface-visibility: hidden; backface-visibility: hidden; }
It is working fine in current canary. (Version 144.0.7504.0)
yes, confirm... also the icon problem.
Okay, this issue was driving me crazy because it only occurred for me and not consistently. Now I understand why: it only happened when I had the Dev Tools open in Chromium.
Thank you for clarifying that it is related to the Chrome Dev Tools.
The issue persists for me with the current version (10.9.7).
@giacomoverdi and @domhaas This problem will only be resolved when Chrome reaches version 144.0.7504.0 or higher. It's a bug in Chromium, not in PrimeReact. I understand that the PrimeReact team doesn't want to invest time in something that will be solved in future versions of Chrome.
@giacomoverdi and @domhaas This problem will only be resolved when Chrome reaches version 144.0.7504.0 or higher. It's a bug in Chromium, not in PrimeReact. I understand that the PrimeReact team doesn't want to invest time in something that will be solved in future versions of Chrome.
You're absolutely right. I just wanted to point out once again that the problem exists, as I've been debugging since yesterday ;)