CSS Rendering Issue: Missing fallback for light-dark() causes transparent backgr

  • SyGy

    (@sygy88)


    4 days, 12 hours ago

    Hi team,

    I’ve encountered a rendering issue with the Query Monitor UI when accessing the WordPress dashboard from older browsers (specifically legacy Chrome builds) that do not yet support the modern light-dark() CSS function.

    Currently, UI variables like --qm-panel-bg and --qm-container-bg rely exclusively on the light-dark() function. When a legacy browser fails to parse this syntax, it drops the declaration entirely. As a result, elements like .qm-container and #query-monitor-main are left without a background color, rendering the entire Query Monitor panel transparent and making the text unreadable over the WP admin interface.

    To ensure graceful degradation, would it be possible to introduce a standard hexadecimal fallback directly preceding the modern declarations in query-monitor.css?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author John Blackbourn

    (@johnbillion)

    WordPress Core Developer

    4 days, 11 hours ago

    There’s been one other report of this and I couldn’t figure out the cause. I’ll take a look, thanks for the message!

    Thread Starter SyGy

    (@sygy88)

    4 days, 11 hours ago

    To fix it, I had to insert the CSS code into the query-monitor.css file in the plugin’s assets folder #query-monitor-main{background-color: #ffffff !important;
    but as soon as I update the plugin, I’ll have to re-insert it.
    Thanks for your reply. I hope you can fix it. Unfortunately, I use an older Mac where Chrome doesn’t update and makes it impossible for me to use your plugin. This temporary fix has solved the problem for now.

Viewing 2 replies - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

Tags