So, apparently after a Firefox update I’m seeing 90deg linear gradients fallback to 0deg.
Only on Firefox engine browsers. So I’m guessing there is some sort of bug on the -moz-linear-gradient property.
Is there a particular reason why Hype doesn’t use global “linear-gradient” css property?
When I use this one, manually via inner HTML, no bugs are detected.
Screens of the bug attached:
Additional detail via Firefox Inspector:
UI 90deg:
background-image: -moz-linear-gradient(rgb(232, 235, 237), rgb(0, 0, 0));
UI 180deg
background-image: -moz-linear-gradient(90deg, rgb(232, 235, 237), rgb(0, 0, 0));
UI 270deg
background-image: -moz-linear-gradient(0deg, rgb(232, 235, 237), rgb(0, 0, 0));
This is a major breaking bug, guys. I have multiple campaigns that are affected and a pissed client.
Would be cool if you can rely on a more robust property in the future. 
Hype uses this function to ‘normalize’ the angle on any render engine other the Gecko, WebKit or Opera:
(Math.abs(backgroundGradientAngle) + 180) % 360
https://www.desmos.com/calculator/e2v1fvz0c4
On the render engine Gecko, WebKit and Opera, Hype uses the following function with similar problems:
(360 - Math.abs(backgroundGradientAngle) + 270) % 360
https://www.desmos.com/calculator/klfbzqemvp
Basically this means it depends on how you turned the “angle knob” … left or right. and what browser your watching this on later.
Gecko, WebKit or Opera => negative values should behave as expected.
Others => positive values should behave as expected.
@jonathan, agree?
Sorry you’re hitting this, Carlos – we’re looking into it!
This is a Firefox bug in 68.0.x. It only seems to affect a gradient that is set to exactly 90 degrees in Hype’s inspector. It has already been fixed in the Firefox 69.0 beta, and it looks like this is scheduled to be released next Tuesday (Sept 3).
Linear gradients have a bit of a sordid history where their original browser-prefixed syntax used angles differently than the final spec version. I’m guessing this bug was probably caused by some sort of simplification from a developer not knowing there needed to be two paths.
Hype supports a wide range of older browser compatibility, and uses a basic check not based on a particular version for which variant to use. As browser vendors nowadays opt to use feature flags instead of prefixes, and this prefix will need to stay around indefinitely to support old syntax, we took a “if it ain’t broke don’t fix it” approach, which also reduces code size in the runtime. But clearly the prefix path is not being tested enough by at least one browser vendor, so I’ve filed a case to implement a version check and use the standard syntax. For timing, I don’t think we’d be able to release our change before Firefox’s fix in a couple fo days 
.
As for a workaround, if your gradient is just a static background, you could do something like add a class in the Identity Inspector for the element, and add code to the head html like:
<style>
.gradientBox {
background-image: linear-gradient(90deg, #000, #ccc) !important;
}
</style>
Yes, that’s exactly the workaround I built in. That’s why I asked why is Hype not using this syntax instead of the browser vendor specifics. But I understand the compatibility issue.
Thanks a lot, @Jonathan and everyone for the swift feedback.
Firefox 69.0 was released and the bug is indeed fixed. Thanks again all of you.