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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(linear-gradient): use transparent color instead of keyword for Safari fix #4859

Merged
merged 5 commits into from
Dec 11, 2019
Merged

fix(linear-gradient): use transparent color instead of keyword for Safari fix #4859

merged 5 commits into from
Dec 11, 2019

Conversation

jendowns
Copy link
Contributor

@jendowns jendowns commented Dec 11, 2019

Safari interprets the transparent keyword (which maps to rgba(0, 0, 0, 0)) differently, which causes the visual issue outlined in #4769. In short: this visual issue causes linear gradients used in the CodeSnippet & Modal components to appear darker, like a transparent black, when viewed in Safari.

Here a couple links explaining this:

Changelog

Changed

  • use the Sass rgba() color function to make primary gradient color transparent, rather than using transparent keyword, in both the CodeSnippet and Modal components

@jendowns jendowns requested a review from a team as a code owner December 11, 2019 15:41
@ghost ghost requested review from dakahn and joshblack December 11, 2019 15:41
@jendowns jendowns changed the title 4769 code snippet safari gradient fix(code-snippet): use transparent color instead of transparent keyword for linear gradients Dec 11, 2019
@jendowns jendowns changed the title fix(code-snippet): use transparent color instead of transparent keyword for linear gradients fix(linear-gradient): use transparent color instead of keyword for Safari fix Dec 11, 2019
@netlify
Copy link

netlify bot commented Dec 11, 2019

Deploy preview for the-carbon-components ready!

Built with commit 283cfe0

https://deploy-preview-4859--the-carbon-components.netlify.com

@netlify
Copy link

netlify bot commented Dec 11, 2019

Deploy preview for carbon-elements ready!

Built with commit 283cfe0

https://deploy-preview-4859--carbon-elements.netlify.com

@netlify
Copy link

netlify bot commented Dec 11, 2019

Deploy preview for carbon-components-react ready!

Built with commit 283cfe0

https://deploy-preview-4859--carbon-components-react.netlify.com

@netlify
Copy link

netlify bot commented Dec 11, 2019

Deploy preview for carbon-components-react ready!

Built with commit 9882ca5

https://deploy-preview-4859--carbon-components-react.netlify.com

@netlify
Copy link

netlify bot commented Dec 11, 2019

Deploy preview for carbon-elements ready!

Built with commit 9882ca5

https://deploy-preview-4859--carbon-elements.netlify.com

@netlify
Copy link

netlify bot commented Dec 11, 2019

Deploy preview for the-carbon-components ready!

Built with commit 9882ca5

https://deploy-preview-4859--the-carbon-components.netlify.com

Copy link
Contributor

@abbeyhrt abbeyhrt left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks great! Thanks Jen!

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.

Code snippet fade effect is inconsistent in Safari
3 participants