Uploaded image for project: 'Jenkins'
  1. Jenkins
  2. JENKINS-72430

Dropdown background is transparent when the browser does not support backdrop-filter

    • Icon: Bug Bug
    • Resolution: Not A Defect
    • Icon: Minor Minor
    • core
    • None
    • Firefox 120.0

      The background for dropdowns is transparent for me in Firefox. It does work in Chrome, but im not sure why. There is no background style set.

          [JENKINS-72430] Dropdown background is transparent when the browser does not support backdrop-filter

          Lukas added a comment -

          Lukas added a comment - https://github.com/jenkinsci/jenkins/pull/8753

          Mark Waite added a comment - - edited

          I can't duplicate that behavior with Firefox 120.0 on my Windows 11 computer. Can you provide more details to describe the configuration where you see that behavior?

          Mark Waite added a comment - - edited I can't duplicate that behavior with Firefox 120.0 on my Windows 11 computer. Can you provide more details to describe the configuration where you see that behavior?

          Lukas added a comment -

          I am using Windows 10, with no special configuration (style customizing plugins or similar) in Firefox. Most of my colleagues do not have this problem, although there is one person who is also affected. I'm not really sure why it works at all, since there is no background attribute set.

          Computed styles show no background style:

          So the default browser style applies: rgba(0,0,0,0) = transparent

          Lukas added a comment - I am using Windows 10, with no special configuration (style customizing plugins or similar) in Firefox. Most of my colleagues do not have this problem, although there is one person who is also affected. I'm not really sure why it works at all, since there is no background attribute set. Computed styles show no background style: So the default browser style applies: rgba(0,0,0,0) = transparent

          Lukas added a comment -

          The inspected node is part of this dropdown:

          Lukas added a comment - The inspected node is part of this dropdown:

          Markus Winter added a comment -

          Can you check what is the setting of 'layout.css.backdrop-filter.enabled' in your firefox?

          If I change this to false (default is true) then I also see this. Changing this requires a restart of firefox to take effect

           

          Markus Winter added a comment - Can you check what is the setting of 'layout.css.backdrop-filter.enabled' in your firefox? If I change this to false (default is true) then I also see this. Changing this requires a restart of firefox to take effect  

          Markus Winter added a comment -

          the backdrop-filter is defined on 'div class="tippy-box"'

          Markus Winter added a comment - the backdrop-filter is defined on 'div class="tippy-box"'

          Lukas added a comment -


          layout.css.backdrop-filter.enabled is set to true

          Lukas added a comment - layout.css.backdrop-filter.enabled is set to true

          Lukas added a comment -

          The backdrop-filter does not seem to be applied:

          Lukas added a comment - The backdrop-filter does not seem to be applied:

          Lukas added a comment -

          https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter says it is not supported in my browser, I can try to find out why that is the case.

          Lukas added a comment - https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter says it is not supported in my browser, I can try to find out why that is the case.

          Lukas added a comment -

          Setting layout.css.backdrop-filter.force-enabled to true works:

          Not sure why this is necessary though

          Lukas added a comment - Setting layout.css.backdrop-filter.force-enabled to true works: Not sure why this is necessary though

          Markus Winter added a comment -

          According to https://stackoverflow.com/questions/63789769/why-backdrop-filter-in-firefox-dont-work there is another property to check: gfx.webrender.all

          Markus Winter added a comment - According to https://stackoverflow.com/questions/63789769/why-backdrop-filter-in-firefox-dont-work there is another property to check: gfx.webrender.all

          Lukas added a comment -

          Thanks for the help. How should we proceed here?

          Lukas added a comment - Thanks for the help. How should we proceed here?

          Lukas added a comment -

          I tried setting gfx.webrender.all to true, but that alone was not enough - I still needed layout.css.backdrop-filter.force-enabled

          Lukas added a comment - I tried setting gfx.webrender.all to true, but that alone was not enough - I still needed layout.css.backdrop-filter.force-enabled

          Lukas added a comment -

          As I have now a working solution for this seemingly very rare problem, I will close the issue.

          Lukas added a comment - As I have now a working solution for this seemingly very rare problem, I will close the issue.

          Daniel Beck added a comment -

          lgf10 Is there something unusual about your client graphics hardware or OS?

          I tried setting gfx.webrender.all to true

          References I found mentioning this also mentioned the need to restart the browser for the change to be effective, did you?

          Daniel Beck added a comment - lgf10 Is there something unusual about your client graphics hardware or OS? I tried setting gfx.webrender.all to true References I found mentioning this also mentioned the need to restart the browser for the change to be effective, did you?

          Lukas added a comment -

          I just did some digging in about:support and while I'm not sure if I would call it unusual, it explains everything.
          I am using Remote Desktop, which results in the real GPU being replaced:

          This causes Firefox to disable the backdrop-filter, since it cant parse the driver

          Lukas added a comment - I just did some digging in about:support and while I'm not sure if I would call it unusual, it explains everything. I am using Remote Desktop, which results in the real GPU being replaced: This causes Firefox to disable the backdrop-filter, since it cant parse the driver

          Lukas added a comment -

          I guess we have now reached the end of the rabbit hole. I would never have guessed that the dropdown being transparent would in any way be related to Remote Desktop - I don't think I have ever had anything remotely similar to this issue. Again, thanks for helping solve this issue

           

          Lukas added a comment - I guess we have now reached the end of the rabbit hole. I would never have guessed that the dropdown being transparent would in any way be related to Remote Desktop - I don't think I have ever had anything remotely similar to this issue. Again, thanks for helping solve this issue  

            Unassigned Unassigned
            lgf10 Lukas
            Votes:
            0 Vote for this issue
            Watchers:
            4 Start watching this issue

              Created:
              Updated:
              Resolved: