Badge 处理中动画优化成类似进度动画或调整下闪烁速度可能会更好

[tusen-ai]

Badge 处理中动画优化成类似进度动画或调整下闪烁速度可能会更好

[07akioni]

System: Windows 10 version 10.0 (64-bit)
Browser: Chrome version 91.0.4472.77 (64-bit)
Display Resolution: 1920 * 1080

放大页面后看到了，直接在页面上看动画不明显，以为没有呢，还有就是展示小的情况下，动画闪烁很快

这个我自己感觉不太好解决，没有 window 电脑。从理论上写的样式应该是没问题。有兴趣调查一下原因吗？

[07akioni]

这个闪烁需要专门的 prop processing，不设定没有

[Hucy]

https://codesandbox.io/s/13ti9?file=/src/Demo.vue:137-147

<template>
  <n-space :size="24" align="center">
    <n-badge dot processing>
      <n-avatar />
    </n-badge>
    <n-badge :value="20" processing>
      <n-avatar />
    </n-badge>
    <n-badge dot type="info" processing>
      <n-avatar />
    </n-badge>
  </n-space>
</template>

在示例代码中同时设置 value 和 processing 后没有动画，这个动画只有在设置 dot 后生效，本身的设计就是这样么，像是两个不同的展示形式

[07akioni]

我看是有的，会不会是浏览器问题？

[Hucy]

System: Windows 10 version 10.0 (64-bit)
Browser: Chrome version 91.0.4472.77 (64-bit)
Display Resolution: 1920 * 1080

放大页面后看到了，直接在页面上看动画不明显，以为没有呢，还有就是展示小的情况下，动画闪烁很快

[myst729]

Mac在视网膜屏上没问题，外接2K显示器就能看到明显的闪烁。放大到150%以后正常。

[07akioni]

题，外接2K显示器就能看到明显的闪烁。放大到

确实能看出来... 这我有点绝望啊

[07akioni]

System: Windows 10 version 10.0 (64-bit)
Browser: Chrome version 91.0.4472.77 (64-bit)
Display Resolution: 1920 * 1080

放大页面后看到了，直接在页面上看动画不明显，以为没有呢，还有就是展示小的情况下，动画闪烁很快

这感觉理论上是 chrome 的 bug

[Hucy]

System: Windows 10 version 10.0 (64-bit)
Browser: Chrome version 91.0.4472.77 (64-bit)
Display Resolution: 1920 * 1080

放大页面后看到了，直接在页面上看动画不明显，以为没有呢，还有就是展示小的情况下，动画闪烁很快

这感觉理论上是 chrome 的 bug

https://github.com/TuSimple/naive-ui/blob/d2b55889d8141844ec84e2eddc9e2d2cae76c20b/src/badge/src/styles/index.cssr.ts#L18

是这个原因么
window.devicePixelRatio 是 1 的情况下会这样

[myst729]

@Hucy 根据目测结果猜测：

Safari 和 Firefox 的表现比较一致。应该没有 0.5px 那一帧，round 到前一桢或后一桢（整数px）重复播放。看着就像跳桢。
Chrome 更像是桢序列提前算好了，然后锁定 FPS 播放。结果就 2K 屏动画速度*2（桢少一半）。

[07akioni]

感觉这个我一时半会可能没法改，如果有人找到方法的话提个 PR 或者说一下。

浏览器确实会有很多奇奇怪怪的边缘情况。

[Hucy]

感觉这个我一时半会可能没法改，如果有人找到方法的话提个 PR 或者说一下。

浏览器确实会有很多奇奇怪怪的边缘情况。

1. 这个 0.5px 是必须的么，可以统一设置为 1px
2. 或者使用 media query 兼容下

[07akioni]

感觉这个我一时半会可能没法改，如果有人找到方法的话提个 PR 或者说一下。
浏览器确实会有很多奇奇怪怪的边缘情况。

1. 这个 0.5px 是必须的么，可以统一设置为 1px
2. 或者使用 media query 兼容下

你换成整数 px 的话是没问题的吗？我当时用整数在 MBP 上是会出问题。

[myst729]

感觉这个我一时半会可能没法改，如果有人找到方法的话提个 PR 或者说一下。
浏览器确实会有很多奇奇怪怪的边缘情况。

1. 这个 0.5px 是必须的么，可以统一设置为 1px
2. 或者使用 media query 兼容下

media query 判断 dpr或许是个解法

[07akioni]

感觉这个我一时半会可能没法改，如果有人找到方法的话提个 PR 或者说一下。
浏览器确实会有很多奇奇怪怪的边缘情况。

1. 这个 0.5px 是必须的么，可以统一设置为 1px
2. 或者使用 media query 兼容下

media query 判断 dpr或许是个解法

应该是可以的，不过我先得确定一下在 windows 上改成整数会不会好呢？或者说在 dpr 为 1 的设备上改成整数。

[Hucy]

感觉这个我一时半会可能没法改，如果有人找到方法的话提个 PR 或者说一下。
浏览器确实会有很多奇奇怪怪的边缘情况。

1. 这个 0.5px 是必须的么，可以统一设置为 1px
2. 或者使用 media query 兼容下

你换成整数 px 的话是没问题的吗？我当时用整数在 MBP 上是会出问题。

这个问题具体是指什么现象？设置的值是 5px 么。我改成 1px 后好像没问题。Windows 下的我回去测试下

[07akioni]

感觉这个我一时半会可能没法改，如果有人找到方法的话提个 PR 或者说一下。
浏览器确实会有很多奇奇怪怪的边缘情况。

1. 这个 0.5px 是必须的么，可以统一设置为 1px
2. 或者使用 media query 兼容下

你换成整数 px 的话是没问题的吗？我当时用整数在 MBP 上是会出问题。

这个问题具体是指什么现象？设置的值是 5px 么。我改成 1px 后好像没问题。Windows 下的我回去测试下

比如说改成一个接近的整数值，这样效果应该不会有很大偏差

[Hucy]

1920x1080_1080p:

3840x2160_4k:

[jahnli]

Yes, at present, the flashing speed is too fast, which leads to the phenomenon of stalling. Would you consider supporting custom speed

[07akioni]

Yes, at present, the flashing speed is too fast, which leads to the phenomenon of stalling. Would you consider supporting custom speed

This is a bug of chrome. I have no windows laptop so doesn't know how to fix it.

[Sepush]

chrome99 中这个bug 已经得到修复

Badge.-.Naive.UI.-.Google.Chrome.2022-03-09.01-19-23.mp4

[hanjialin]

edge这个问题到现在依然存在。。

[mode365Dong]

https://github.com/tusen-ai/naive-ui/assets/88695831/ac5baa40-2d59-4558-8bbe-38a5b1ff7382
在手机中存在这个问题，如果是原生或者本身就是这样的话，能否考虑重新设计这个组件，因为本身的processing就不是很明显。考虑下呼吸灯？