search

HatScripts / circle-flags

A collection of 400+ minimal circular SVG country, state and language flags
https://hatscripts.github.io/circle-flags
MIT License
928 stars 248 forks source link

Color-bleeding issue #39

Closed doublex closed 2 years ago

doublex commented 2 years ago

Commit: https://github.com/HatScripts/circle-flags/pull/18/commits/a419c7faaf800c479b21f09a5e5211db5121d344
visibility:hidden shadows all other inlined SVGs (testcase below). Tested with: Chrome + Firefox Would it be possible to revert this patch? Thank you so much!

<!DOCTYPE html>
<html >
<head></head>
<body>
<!-- hides the 2 flags below -->
<div style="visibility:hidden">
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><mask id="a"><circle cx="256" cy="256" r="256" fill="#fff"/></mask><g mask="url(#a)"><path fill="#eee" d="m0 256 249.6-41.3L512 256v256H0z"/><path fill="#a2001d" d="M0 0h512v256H0z"/></g></svg>
</div>
<!-- invisible -->
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><mask id="a"><circle cx="256" cy="256" r="256" fill="#fff"/></mask><g mask="url(#a)"><path fill="#eee" d="m0 256 258.2-43.3L512 256v256H0z"/><path fill="#d80027" d="M0 0h512v256H0z"/></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><mask id="a"><circle cx="256" cy="256" r="256" fill="#fff"/></mask><g mask="url(#a)"><path fill="#d80027" d="m0 256 256.4-44.3L512 256v256H0z"/><path fill="#eee" d="M0 0h512v256H0z"/></g></svg>
</body>
</html>
HatScripts commented 2 years ago

I'm not sure why this happens.

Using opacity:0 instead of visibility:hidden works as expected (CodePen).

An alternative fix is to ensure that each inline SVG has a unique mask id (CodePen).

doublex commented 2 years ago

The problem occurred when a flag was embedded on an offcanvas ("drawer"). The offcanvas is 3rdparty and uses visibility:hidden.

doublex commented 2 years ago

Would it be tedious to publish both versions?

HatScripts commented 2 years ago

Yes, it would be somewhat tedious to publish live versions of both. You are welcome to use v1.0.0 (Initial release) but bear in mind that branch is 9 months old and is 77 commits behind the latest release.