Odd CSS differences between Chrome and Safari browser

Question

I'm working on a link styling issue. I found a pretty good reference, and in particular the “Read more” Link example. Here is the codepen for that example.

----HTML-----

<a href="#0" class="r-link link text-underlined">Click this link</a>

----CSS-----

.r-link{
    display: var(--rLinkDisplay, inline-flex) !important;
}

.r-link[href]{
    color: var(--rLinkColor) !important;
    text-decoration: var(--rLinkTextDecoration, none) !important;
}

.text-underlined{
    --uiTextUnderlinedLineHeight: var(--textUnderlinedLineHeight, 2px); /* 1 */
    --uiTextUnderlinedLineGap: var(--textUnderlinedLineGap, .5rem);
    --uiTextUnderlinedPaddingBottom: calc(var(--uiTextUnderlinedLineHeight) + var(--uiTextUnderlinedLineGap));

    padding-bottom: var(--uiTextUnderlinedPaddingBottom) !important;
    position: var(--textUnderlinedPosition, relative) !important;
        z-index: var(--textUnderlinedZindex, 1) !important;
}

.text-underlined::after{
    content: "";
    width: var(--textUnderlinedLineWidht, 100%) !important;
    height: var(--uiTextUnderlinedLineHeight) !important;
        background-image: var(--textUnderlinedBackgroundImage, linear-gradient(to top, var(--textUnderlinedLineColor, currentColor) 30%, rgba(0, 0, 0, 0) 45%)) !important;

    position: absolute;
    left: var(--textUnderlinedLineLeft, 0) !important;
    bottom: var(--textUnderlinedLineBottom, 0) !important;
        z-index: var(--textUnderlinedLineZindex, -1) !important;
}

.link{
    --textUnderlinedLineHeight: 100%;
    --textUnderlinedLineGap: 0;
    --textUnderlinedLineColor: #fed330;
    
    padding-left: .75rem;
    padding-right: .75rem;
}

.link::after{
    will-change: width;
    transition: width .1s ease-out;
    transform: rotate(-2deg);
    transform-origin: left bottom;
}

.link:hover{
    --textUnderlinedLineWidht: 0;
}

.link:hover::after{
    transition-duration: .15s;
}

.link{
    font-weight: 700;
    text-transform: uppercase;
}

.link:focus{
    outline: 2px solid #fed330;
    outline-offset: .5rem;
}

:root{
    --rLinkColor: #222;
}

Here is my attempt in Chrome. Looks great.

And here is the same code in Safari. What is that odd dark colored line?

Note: the dark colored line is visible on macOS desktop Safari as well as iOS on iPhone. I see the same defect in the codepen when displayed on different browsers. Except for the color splash, my CSS is EXACTLY the same as the codepen linked above.

Two questions:

What causes this? (Is this a non-compliance bug for either Google or Apple?)
How to fix the CSS so it displays without the dark colored line at the top of the color band in Safari?

Does this answer your question? [linear-gradient to transparent bug in latest safari?](https://stackoverflow.com/questions/38391457/linear-gradient-to-transparent-bug-in-latest-safari) — Kaiido, Dec 13 '21 at 06:08
I've confirmed the CSS element that matters is `.text-underlined::after`, but I'm unable to change the color of that band. Still working on this... — zipzit, Dec 13 '21 at 06:40
@Kaiido Definitely NOT the same root cause as that other posting, but it did get me to think in a different direction. The root cause in my case was an error in the original sample code. I did contact the author of that to suggest a fix... thanks. — zipzit, Dec 13 '21 at 07:06
Yes the root cause is exactly the same: Safari is buggy and doesn't render gradients in the correct color space. Your "different direction" is just the fix proposed by the 2 top voted answers. — Kaiido, Dec 13 '21 at 07:18
No. I don’t see this as a Safari miss at all. Definitely a Chrome miss. And if the developer of the original sample had been using Safari he would have caught his error immediately. — zipzit, Dec 13 '21 at 07:32
This is a Safari bug: https://stackoverflow.com/a/56548711/3702797 They ought to perform the interpolation on the premultiplied RGBA space, they don't, they are buggy. — Kaiido, Dec 13 '21 at 07:45
Okay. I see your point. So, here's my questions. How would I have ever discovered that answer in stack overflow? What search terms would I have used to find that issue? When I first broached the trouble, I had no idea this was a transparency issue. Look again at the answer from Lea Verou. And my final question. Would the stackoverflow be better served if this question and answer was simply be deleted? — zipzit, Dec 13 '21 at 08:02
And yeah, I'm often beyond disgusted with all the off standard stuff that Safari does.. I've wasted days of my life chasing down issues (scrolling animations, Progressive Web Apps, errors in CSS for reactive sites, etc...). I hate, really hate trying to defend that program. — zipzit, Dec 13 '21 at 08:06
Hard to say how you should have been able to find this other Q.A, I did because I knew about this issue that already did bite me too. Regarding the deletion of this post, no it may not make StackOverflow a better place to remove this question, but closing as duplicate does not necessarily means that the question will be deleted, here given it has an upvoted answer it won't be, and it may serve as a sign-post for future people that would face the same issue and use the same wordings as you. Regarding the rant against Safari, https://jobs.apple.com/en-us/search?search=webkit — Kaiido, Dec 13 '21 at 08:46

zipzit · Answer 1 · 2021-12-13T07:07:56.193

So the comment from Kaiido gave me some great hints. It was not exactly the same root cause, but got me thinking in a different direction. I believe the root cause of my issue was an oversight in the original sample source code (plus what appears to be a miss in Chrome). Reference.

Here is the corrected code:

.text-underlined::after {
    content: "";
    width: var(--textUnderlinedLineWidth, 100%) !important;
    height: var(--uiTextUnderlinedLineHeight) !important;
    background-image: var(
        --textUnderlinedBackgroundImage,
        linear-gradient(
            to top,
            var(--textUnderlinedLineColor, currentColor) 30%,
            rgba(255, 255, 255, 0) 45%
            /* previous rgba(0, 0, 0, 0) 45%  fail in Safari */
        )
    ) !important;

    position: absolute;
    left: var(--textUnderlinedLineLeft, 0) !important;
    bottom: var(--textUnderlinedLineBottom, 0) !important;
    z-index: var(--textUnderlinedLineZindex, -1) !important;
}

As I see it, this was likely an issue overlooked in the original source code. Not sure why Chrome didn't catch it, but once I made the change to rgba(255, 255, 255, 0) 45% the element looks great in both Safari and Chrome.

Odd CSS differences between Chrome and Safari browser

1 Answers1