Gradient border and text is not working on Safari and IPhone devices

user_11220076 0
Viewed 715

  • I have the color of text and border-bottom in gradient color and not working as expected on:

  • Safari (Desktop)

  • iPhone (Safari)

Screenshots:

  1. This is how it looks on Chrome web

enter image description here

  1. This is how it looks on Safari (Desktop)

enter image description here

  1. This is how it looks on IPhone 12 Safari

enter image description here

CSS code written with styled components:


export const Tabs = styled.ul`
    display: flex;
    width: 100%;
    margin-top: 2em;
`;

export const Tab = styled.li`
    display: flex;
    ${fontStyles[fontSizes.eighteen]};
    border-bottom: 3px solid transparent;
    background-image: linear-gradient(rgba(0, 145, 148, 1), rgba(72, 71, 112, 1)),
        ${colors.gradientGreen};
    background-clip: content-box, border-box;
    box-shadow: 2px 1000px 1px ${colors.offWhite} inset;
    cursor: pointer;
    outline: none;
`;

export const Span = styled.span`
    font-weight: 800;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    border-image-source: ${colors.gradient};
    background-image: ${colors.gradientGreen};
`;

Any help / comment / advice is welcome :)

sass css html ios
4 Answers

try to implement this logic in your code :

https://codepen.io/KnightOfInfinity/pen/jOBQPxz

code:: html -

<html>
<body>
<p>Biometrics</p>
</body>
</html>

css -

/*  gradient variable */
:root{
  --gradient: linear-gradient(to right, yellow, green);
}
/*
  align items to center inside the body
*/
body{
  display: flex;
  justify-content: center;
  align-items:center;
  background: #121212;
}

/* real useful code  */
/*    text    */
p{
  display:block;
  height: contain;
  max-width: max-content !important;
  font-size: 63px;
  font-weight: 900;
  background: var(--gradient);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: red;
}
/*    underline   */
p:after {
    content: '\00a0';
    background-image:
      var(--gradient);
    background-size: 100% 12px;
    background-repeat: no-repeat;
    float:left;
    width:100%;
}
user_159439000

Try This :

export const Tab = styled.li`
display: flex;
${fontStyles[fontSizes.eighteen]};
border-bottom: 3px solid transparent;
background-image: -webkit-linear-gradient(rgba(0, 145, 148, 1), rgba(72, 71, 112, 1)),
    ${colors.gradientGreen};
background-clip: content-box, border-box;
box-shadow: 2px 1000px 1px ${colors.offWhite} inset;
cursor: pointer;
outline: none;`;

I added -webkit- before linear-gardient

user_97814950

I have faced this problem earlier and done a lot of research and development after that I fond a solution which is really helpful. Please Add all font face locally, download .eot, .woff, .woff2, .ttf and .svg files of your font and add it to your css file for example:

@font-face {
font-family: Gotham_Book;
font-display: swap;
src: url(../Fonts/GothamBook.eot);
src: url(../Fonts/GothamBook.eot?#iefix) format("embedded-opentype"), url(../Fonts/Gotham-Book.woff2) format("woff2"), url(../Fonts/GothamBook.woff) format("woff"), url(../Fonts/GothamBook.ttf) format("truetype"),
    url(../Fonts/GothamBook.svg#svgFontName) format("svg");
}
user_111151770

probably the issue isn't connected with the text/border gradient, I guess Tab height is wrong and the text just cropped/hidden

user_57627720
Related