CODEWITHSUNDEEP
cssgoogle-chromesafari
zipzit
zipzit

Reputation: 4027

Odd CSS differences between Chrome and Safari browser

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. Chrome link

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

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:

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

Upvotes: 1

Views: 1147

Answers (1)

zipzit
zipzit

Reputation: 4027

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.

Upvotes: 1

Related Questions