V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
Caturra
V2EX  ›  问与答

请教前端大佬,这是浏览器的 bug 还是 CSS 有问题?

  •  
  •   Caturra · 276 天前 · 899 次点击
    这是一个创建于 276 天前的主题,其中的信息可能已经有所发展或是发生改变。
    在看 wordpress 的主题,打算做些参考

    https://wp-themes.com/twentyseventeen/?p=36

    我发现这个 demo 的链接高亮会有诡异的现象,会残留多一条下划线
    (偶现,多找几个链接用鼠标划一下应该能复现)

    https://imgur.com/a/K83yF9G

    但这个 bug 是在 edge 或者其它 chrome 系浏览器才存在的,firefox 就没这个问题
    这种 bug 该怎么修复或者规避?不懂前端,求指教
    10 条回复    2023-07-27 00:22:39 +08:00
    shuxhan
        1
    shuxhan  
       276 天前   ❤️ 1
    感觉是高分屏下浏览器的问题,我用 2k 缩放 200%可以看到残留的线,再点击下空白消失,估计是 chrome bug ?
    lneoi
        2
    lneoi  
       276 天前
    -webkit-box-shadow: inset 0 -1px 0 rgb(15 15 15);
    box-shadow: inset 0 -1px 0 rgb(15 15 15);
    这个样式取消掉就不会产生了,看起来就是为了搞链接可点击的提示效果
    lneoi
        3
    lneoi  
       276 天前
    哦 看了图片 是底下还有一横 在目前用的浏览器倒是复现不出来 会不会是 hover 效果后残留的
    awanabe
        4
    awanabe  
       276 天前   ❤️ 1
    chrome 系列一直有一个问题就是对 1px 的除法的问题..在动画或者缩放情况下...不能凑整数就会出现溢出
    ff 会收拾的很干净
    lneoi
        5
    lneoi  
       276 天前   ❤️ 1
    400%下能稳定出现,hover 后的 box-shadow 残留的,改变颜色后可以看到残留颜色,去除第一个 inset 后不会出现,但动态效果会不太一样。
    P233
        6
    P233  
       276 天前   ❤️ 1
    感觉是 transition 不明确导致的问题

    前:inset 0 -1px 0 rgba(15, 15, 15, 1)
    后:inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(0, 0, 0, 1)

    建议

    前:0 1px 0 rgba(15, 15, 15, 1)
    后:0 3px 0 rgba(0, 0, 0, 1)
    LLaMA2
        7
    LLaMA2  
       276 天前   ❤️ 1
    box-sizing: inherit; 导致的
    Caturra
        8
    Caturra  
    OP
       276 天前
    @lneoi 去掉第一个 inset 后不对味了。。
    @P233 简单调试了一下,这个好像 edge 仍有问题;但是前一个不变后一个改为 inset 0 -3px 0 rgba(0, 0, 0, 1)就没问题,只是 inset 的话感觉很拥挤
    @ye4tar 没太懂 box 这些概念,我先查查资料
    P233
        9
    P233  
       276 天前
    如果 edge 还有问题,是不是一个加了 inset , 另一个没有?

    参考 W3C 的要求

    For example, the animation type of the box-shadow property is shadow list, which defines that when the inset keyword is absent in one value but present in the other, discrete animation is used. As a result 0px 0px black and inset 10px 10px black are not transitionable.

    https://drafts.csswg.org/css-transitions/
    Caturra
        10
    Caturra  
    OP
       276 天前
    @P233 全部加了或者全部去掉都可能有问题,它是符合 W3C 的标准有过渡动画,只是和 5 楼描述的阴影残留 bug 还是有

    太麻烦了,本来只是想抄一下样式,还是换个别的主题吧
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   947 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 19:33 · PVG 03:33 · LAX 12:33 · JFK 15:33
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.