helm / helm-www

The Helm website for docs, blog and project info.
https://helm.sh
MIT License
203 stars 511 forks source link

Chore: fix Home overview section to show a transparent background color on IOS #1542

Closed thisisobate closed 4 weeks ago

thisisobate commented 10 months ago

Fixes #1537

thisisobate commented 10 months 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!