anup-a / svgwave

SVG Wave is a tiny, free and beautiful SVG gradient waves generator for your next design.

Home Page:https://www.svgwave.in

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Compatibility issue around CSS style hex color string with opacity (formats like #RRGGBBAA)

chrysocolla opened this issue · comments

Some old and quirky browsers may have issue parsing CSS style hex color written in #RRGGBBAA. They just fallback to initial value, if there is any. And since the fill of these wave paths are transparent by default generated with this awesome tool, users who are using these browsers can only see black waves with no transparency.

TBS cannot handle #RRGGBBAA color properly

Fixing the problem can be rather simple. It is said that CSS style hex color string with opacity (#RRGGBBAA) can only be tolerated by modern browers like Chromium or Firefox (and newer version of Safari, maybe? I really don't know). It's recommended to use regular #RRGGBB or html colors like whitesmoke for attributes like fill or stroke, and use fill-opacity for, you know, fill opacity, and use stop-opacity for <linearGradient> and <radialGradient> like wise. There is also an attribute opacity described here, but I won't use that for setting up opacity for background (Or maybe? Why not). All of these "opacity" variants are Number from 0.0 to 1.0. Value that falls out of the range would be clamped to the range.

Well, I was mainly talking about Tencent Browsing Service, a WebView utility developed by a evil mega crop dedicated to Android which is infamous for its compatibility and performance issues, but unfortunately have a relatively huge (I mean, HUGEEEE!!!) user base in China thanks to the mega app, WeChat. Other webkit based browsers may also experience this issue, so it would be nice to fix that.

@chrysocolla thanks for pointing this out!
Didn't knew any of this.

Currently I'm busy with something else, feel free to create PR.