Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Align tintColor transparent color behaviour with native #2691

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

karlsander
Copy link

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 from atop to in fixes the behaviour. The operator description for "in" on the MDN page doesn't really sound wrong to me either. It works the same, except atop also has this:

The parts of the destination graphic that do not overlap with the source graphic stay untouched.

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

        <View style={{ backgroundColor: 'blue', padding: 12, flexDirection: 'row' }}>
          <Image tintColor={'rgba(255, 0, 0, 0)'} source={InactiveStar} />
          <Image tintColor={'rgba(255, 0, 0, 0.1)'} source={InactiveStar} />
          <Image tintColor={'rgba(255, 0, 0, 0.5)'} source={InactiveStar} />
          <Image tintColor={'rgba(255, 0, 0, 0.9)'} source={InactiveStar} />
          <Image tintColor={'rgba(255, 0, 0, 1)'} source={InactiveStar} />
        </View>

Here are screenshots with atop and in. From left to right:
iOS native, iOS Safari, macOS Chrome, macOS Firefox

with atop:

Screenshot 2024-06-20 at 13 51 56

with in

Screenshot 2024-06-20 at 13 54 29

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.

Copy link

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit aad40b1:

Sandbox Source
react-native-web-examples Configuration

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant