URL: http://announcement.frontendne.com/bugzilla.html
Browser / Version: Firefox 51.0
Operating System: Mac OS X 10.11
Problem type: Something else - I'll add details below

Steps to Reproduce

1. Navigate to: http://announcement.frontendne.com/bugzilla.html
2. Look at a seemingly blank page

Expected Behavior: The page should have a rainbow style gradiated background

Actual Behavior: the page has a white background

I've dug into this a little and it's an issue with the CSS variables. If you look at the inspector I put in a fallback for when the browser can't render the CSS variable version of the gradient. This works great for iOS Safari, but Firefox still tries to render the non-fallback version.

Specifically the issue is with hsla( calc( var(--hue) + 90 ) 50%, 50%, 1 ). It seems it can't handle the calc() statement and the variable together (though this seems to be standard practice for doing math on css variables).

I've gotten around the issue myself by removing the calc() part and doing the math in Javascript. However, Firefox should either render the gradient or nullify it and fall back to the next CSS rule. I've created a separate bugzilla url so you can continue to see the issue.

From webcompat.com with ❤️