and check this page on Firefox on one of my systems with Windows 10 Pro then no image shows up.
But if I check on another system which has Windows 10 Home with same firefox 64 bit version then image shows up fine.
I’m not entirely clear what you’re asking here. Are you looking for advice on using filter:brightness in your own site, or a way to make images from other sites show on your Windows 10 Pro box?
Sorry if I was not clear. My query is that the css property : filter : brightness does not work on some devices and works on some devices on Firefox browser. So is this a known bug? or is there some work around code.
If you see the 2 images I have attached above : one shows the image (that is another browser) and one attachment has no firefox logo image (that is on Firefox browser).
I find only the blur filter works in my Firefox (or most systems with Windows 10 Pro) not sure if this issue occurs in other systems. It seems to work with Windows 10 Home version.
On my firefox on windows 10 pro only css filter : blur works and displays fine. No other filters work
I have windows 10 pro and Firefox 64 bit (version 63) and the brightness filter is working fine for me. I’ve searched on google and can see no others speaking of this issue.
Maybe there’s an issue with the brightness controls on your system?
Thanks I checked all drivers are updated to the latest version.
Also like I mentioned earlier css filter property has different options out of which only blur effect works
and drop-shadow displays the image but not the shadow effect.
blur()
Blurs the image.
brightness()
Makes the image brighter or darker.
contrast()
Increases or decreases the image’s contrast.
drop-shadow()
Applies a drop shadow behind the image.
grayscale()
Converts the image to grayscale.
hue-rotate()
Changes the overall hue of the image.
invert()
Inverts the colors of the image.
opacity()
Makes the image transparent.
saturate()
Super-saturates or desaturates the input image.
sepia()
Converts the image to sepia.
Can you confirm that its not working on 2 independent machines using Firefox on Windows10 pro? Otherwise it would seem to point to an issue with your machine
What version of Firefox are you using. You mention latest but don’t say what version that is (latest is 63 I believe).
Have you tried disabling all the Firefox extensions just to see if that’s a problem.
What does the web inspector show for the rules being applied to that image element. Does toggling the filter in the inspector make the image come back?
Are there any errors showing in the console on the web inspector that may give a clue to the problem?
Sorry, I can’t offer anything better but these types of problem can usually only be resolved on the machine that exhibits the problem. Its almost impossible to debug remotely unless there is a documented bug (of which there doesn’t seem to be).
Yes, let me recheck on the other system and get back. I definitely think the other one was also windows pro.
Yes latest version of firefox - Firefox Quantum - 63.0 (64-bit)
Yes did all that before writing on the forum. Not only disabled but uninstalled and reinstalled both versions 32 bit and 64 bit and checked. Issue is on both versions on my system.
Yes web inspector shows the correct rules being applied without error. If I disable the rule from the web inspector then the image shows up fine.
No other errors show up. And this happens across most sites that use css filters and issue shows up only on Firefox no other browser. I have installed latest versions of Edge, Opera and Chrome and this issue is not present on any other browser.
Ya even I have been trying to figure out why this may happen on random systems so not really sure what the issue is. Thanks a lot for your help!
Glad you found the answer and as I suspected it was a hardware issue related to your machine (and of course maybe other machines with the exact same setup as you).
The performance settings are checked in my Firefox and work fine with no problem so its probably a problem with your make of display/graphics driver/card. That’s probably the reason that there are aren’t others complaining as they would need the same setup as you and of course to be using the filter in their code to notice the ill effects.
As I said my windows 10 system uses the performance settings with the filter without problem and I would be loathe to disable the hardware acceleration as CSS animations use that to offload the work from the cpu.
I did read that some people who upgraded to Windows 10 from previous versions couldn’t run some of their games unless they changed the performance setting in Firefox which may indicate that older displays or graphics card could be an issue here.
Glad that you persevered and found a solution for yourself and thanks for posting your results as it will help others in the same situation.
Ya thats surprising, because I checked settings of other browsers and find that Hardware Acceleration is enabled on all others and works perfectly fine. Its only on Firefox that it creates issue, so may be some coding bug in Firefox which causes this to happen? Or may be they have missed out on a few older processors / hardware due to which this occurs? Thanks a lot.
