Align tintColor transparent color behaviour with native #2691
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
I noticed that when we apply
tintColor
to images using a color with transparency, they seem to blend the color against black before applying it.I am not deep enough in SVG to /really/ understand what's going on, but I noticed that changing the
feComposite
operator fromatop
toin
fixes the behaviour. The operator description for "in" on the MDN page doesn't really sound wrong to me either. It works the same, exceptatop
also has this:Isn't the source graphic in this case the flood fill? So there's no way not to overlap. I would expect identical behaviour, and yet,
in
operator has correct transparency behaviour in the browsers I tested.I made some test screenshots with the following code
Here are screenshots with
atop
andin
. From left to right:iOS native, iOS Safari, macOS Chrome, macOS Firefox
with
atop
:with
in
If you have any ideas what kinds of other scenarios should be tested, or what kind of test info should be attached to the PR, let me know.