Chrome 和 Safari 浏览器之间奇怪的 CSS 差异

Posted 2023-03-06

【中文标题】Chrome 和 Safari 浏览器之间奇怪的 CSS 差异

【英文标题】：Odd CSS differences between Chrome and Safari browser

【发布时间】：2022-01-16 15:51:15

【问题描述】：

我正在处理链接样式问题。我发现了一个漂亮的good reference,，尤其是“阅读更多”链接示例。这是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;

这是我在 Chrome 中的尝试。看起来很棒。

这是 Safari 中的相同代码。那条奇怪的深色线是什么？

注意：深色线在 macOS 桌面 Safari 和 iPhone 上的 ios 上可见。当在不同的浏览器上显示时，我在 codepen 中看到了相同的缺陷。除了颜色飞溅，我的 CSS 和上面链接的 codepen 完全一样。

两个问题：

是什么原因造成的？ （对于 Google 或 Apple 来说，这是一个不合规错误吗？） 如何修复 CSS，使其在 Safari 中的色带顶部不显示深色线条？

【问题讨论】：

可以尝试评论教派看看是什么原因造成的

这能回答你的问题吗？ linear-gradient to transparent bug in latest safari?

我已经确认重要的 CSS 元素是 .text-underlined::after，但我无法更改该乐队的颜色。仍在努力……

@Kaiido 绝对不是与其他帖子相同的根本原因，但它确实让我想到了不同的方向。在我的案例中，根本原因是原始示例代码中的错误。我确实联系了该作者以提出修复建议...谢谢。

是的，根本原因是完全一样的：Safari 有问题，不能在正确的色彩空间中渲染渐变。您的“不同方向”只是 2 个投票最多的答案提出的解决方案。

【参考方案1】：

所以 Kaiido 的评论给了我一些很好的提示。这不是完全相同的根本原因，但让我想到了不同的方向。我相信我的问题的根本原因是对原始示例源代码的疏忽（加上 Chrome 中似乎遗漏的内容）。 Reference.

以下是更正后的代码：

.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;

在我看来，这可能是原始源代码中忽略的一个问题。不知道为什么 Chrome 没有捕捉到它，但是一旦我对 rgba(255, 255, 255, 0) 45% 进行了更改，该元素在 Safari 和 Chrome 中看起来都很棒。