Closed thisisobate closed 4 weeks ago
I just realized the issue isn't with the linear gradient not supported on MacOS.
The real problem is that background-blend-mode
css property is not supported on IOS. See here: https://stackoverflow.com/questions/35452263/css-a-background-blend-mode-fallback-for-iphone-safari
As a fallback, I'm considering disabling the background-blend-mode property
and setting the background image to a linear gradient instead. This would only apply to mobile and tablet displays across all browsers.
How did I arrive at my current solution?
The idea is to prioritize usability over aesthetics.
I considered setting the background not to repeat as the stackoverflow article suggests but that didn't work in my case. Another option I considered was to set an overlay over the background image and tweak the opacity a bit but that did not give me a very desirable result UX wise.
Hope this helps!
Fixes #1537