search

justin-chu / react-fast-marquee

A lightweight React component that harnesses the power of CSS animations to create silky smooth marquees.
https://react-fast-marquee.com
MIT License
1.16k stars 95 forks source link

gradient property compatibility issues in Safari browser on Mac #90

Closed hsyfee closed 7 months ago

hsyfee commented 9 months ago

After setting the gradient property in the latest version, there is a styling issue with a black shadow in Safari browser on Mac. Official code is as follows. .rfm-overlay::before, .rfm-overlay::after { background: linear-gradient(to right, var(--gradient-color), transparent); } But in the Safari browser, the 'transparent' attribute appears as a black transparent shadow. I see that in the old version of RFM, this 'transparent' attribute was not present. In the new version, this 'transparent' attribute cannot be changed, resulting in the above-mentioned issue.

semvgelooven commented 7 months ago

This seems to be an issue again. Using 0.1 as alpha value breaks the gradient on darker background, reverting back to alpha value 0 fixes this for me. Using CSS I am able to override and fix this issue:

.rfm-overlay::before, .rfm-overlay::after { background: linear-gradient( to right, var(--gradient-color), rgba(255, 255, 255, 0) ) !important; }

example

example 2

justin-chu commented 7 months ago

@semvgelooven sorry, this should now be fixed in 1.6.4!