# 所选帖子的颜色在深色主题下淡入效果抖动

**URL:** <https://meta.discourse.org/t/selected-post-color-fade-in-is-jittery-under-dark-themes/132705>\
**Category:** UX\
**Created:** [2019年十一月6日 00:47 UTC](https://meta.discourse.org/t/selected-post-color-fade-in-is-jittery-under-dark-themes/132705 "2019-11-06T00:47:11Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![seanblue](https://avatars.discourse-cdn.com/v4/letter/s/dc4da7/32.png) [@seanblue](https://meta.discourse.org/u/seanblue)\
**Post date:** [2019年十一月6日 00:47 UTC](https://meta.discourse.org/t/selected-post-color-fade-in-is-jittery-under-dark-themes/132705/1 "2019-11-06T00:47:11Z")

</div>

打开主题时，当前选中的帖子会以某种颜色淡入。在 meta 的深色主题中，该颜色为蓝色，随后渐变为正常的黑色。最近，在过渡即将结束时，这一效果开始出现抖动，而非平滑过渡。[我最初在社区.wanikani.com](http://xn--7bry0ao5gfzop4fwu4a.wanikani.com) 的深色主题中注意到此问题，但 meta 上也出现了同样的情况。我在两台不同的电脑上使用 Chrome 和 Edge 浏览器都观察到了该问题。我使用的另一个 Discourse 站点（我相当确定其版本较旧）并未出现此问题。如果可以通过浏览器控制台检查该站点的版本（且该信息有用），请告诉我，我会将相关信息补充到这里。

请查看下方的演示视频。

[https://global.discourse-cdn.com/meta/original/3X/2/0/208bd5d59eff5c0c64c30f71afa21d38fdf0c40b.mp4](https://global.discourse-cdn.com/meta/original/3X/2/0/208bd5d59eff5c0c64c30f71afa21d38fdf0c40b.mp4)

---

<div class="post-metadata">

**Author:** ![jomaxro](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jomaxro/32/126216_2.png) [@jomaxro](https://meta.discourse.org/u/jomaxro)\
**Post date:** [2019年十一月6日 00:52 UTC](https://meta.discourse.org/t/selected-post-color-fade-in-is-jittery-under-dark-themes/132705/2 "2019-11-06T00:52:40Z")

</div>

> [@seanblue](#):
>
> 如果有一种方法可以让我从浏览器控制台检查该网站的版本

在 Chrome 中：右键点击网站空白部分，选择“查看网页源代码”。在第 9 行左右，您会看到版本号以及提交信息本身。请分享这两项内容。

---

<div class="post-metadata">

**Author:** ![seanblue](https://avatars.discourse-cdn.com/v4/letter/s/dc4da7/32.png) [@seanblue](https://meta.discourse.org/u/seanblue)\
**Post date:** [2019年十一月6日 01:05 UTC](https://meta.discourse.org/t/selected-post-color-fade-in-is-jittery-under-dark-themes/132705/3 "2019-11-06T01:05:07Z")

</div>

[community.wanikani.com](http://community.wanikani.com)（存在此问题）：

- `Discourse 2.4.0.beta6 - https://github.com/discourse/discourse 版本 437edfc4157aac4d9a50d911bca550d4425193cf`
- 提交日期：10 月 28 日

* * *

community.bunpro.jp：（不存在此问题）：

- `Discourse 2.4.0.beta2 - https://github.com/discourse/discourse 版本 3503758599ae451b962afa4e05c8e88dcb0f021a`
- 提交日期：8 月 10 日

* * *

正如我所料，未出现该问题的站点确实版本过旧。顺便一提，我认为该问题仅在最近一两周才出现在 [community.wanikani.com](http://community.wanikani.com) 上。我每天都会多次访问该站点，因此一旦问题出现，我肯定会立刻察觉。

---

<div class="post-metadata">

**Author:** ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)\
**Post date:** [2019年十一月8日 04:57 UTC](https://meta.discourse.org/t/selected-post-color-fade-in-is-jittery-under-dark-themes/132705/4 "2019-11-08T04:57:20Z")

</div>

浅色主题下也会出现这个问题吗？

---

<div class="post-metadata">

**Author:** ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)\
**Post date:** [2019年十一月8日 07:27 UTC](https://meta.discourse.org/t/selected-post-color-fade-in-is-jittery-under-dark-themes/132705/5 "2019-11-08T07:27:30Z")

</div>

我也可以在 Meta 上复现这个问题，而且是在使用旧版本提交的网站上：

> **[Vocabulary within sentences](https://community.bunpro.jp/t/vocabulary-within-sentences/13233/2?preview_theme_id=3)**
>
> As far as I remember, most of the N5 and N4 grammar sentences use relatively common and easy vocab.

我相当确定这不是我们的 bug。我可以在一个 [fiddle](https://jsfiddle.net/sbrgq894/1/) 中复现它。

如果你多次点击运行，会注意到第一个和第二个框没有这个问题。

第一个框代表浅色主题，它没有这个问题。第二个框是我为了对比添加了黑色背景的，它也没有问题。

问题在第三个框中最明显，它使用了与默认深色主题相同的颜色。我认为这种颜色组合以某种方式导致了浏览器的问题。我已经尝试了所有我所知的动画 hack，但结果仍然一样。

除非我们更改动画或使用不同的颜色，否则除了等待浏览器修复之外，我不确定我们还能做什么，而这个修复可能短期内不会到来。

---

<div class="post-metadata">

**Author:** ![seanblue](https://avatars.discourse-cdn.com/v4/letter/s/dc4da7/32.png) [@seanblue](https://meta.discourse.org/u/seanblue)\
**Post date:** [2019年十一月8日 14:19 UTC](https://meta.discourse.org/t/selected-post-color-fade-in-is-jittery-under-dark-themes/132705/6 "2019-11-08T14:19:32Z")

</div>

> [@Johani](#):
>
> 等待浏览器发布修复版本

正如我之前提到的，这个问题在 Chrome 和 Edge 上都会出现。Edge 目前仍是基于旧内核（非 Chromium），所以它们并非使用相同的渲染引擎。正因如此，这个问题突然开始出现才显得格外奇怪。当然，我检查 Edge 只是为了确认这不是 Chrome 的专属问题。完全有可能 Edge 上早已存在该问题，只是最近才在 Chrome 中出现。

我还在新笔记本电脑上首次发现了这个问题，这台电脑我仅使用了大约一周半。因此，我特意在另一台电脑上验证了该问题，以排除其是否仅与新电脑相关。不过，我稍后可以启动旧笔记本电脑，看看是否也会出现同样的情况。也许这涉及某种与电脑硬件相关的优化机制。

---

<div class="post-metadata">

**Author:** ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)\
**Post date:** [2019年十一月8日 14:31 UTC](https://meta.discourse.org/t/selected-post-color-fade-in-is-jittery-under-dark-themes/132705/7 "2019-11-08T14:31:40Z")

</div>

> [@seanblue](#):
>
> 这完全有可能是在 Edge 上已经存在了不知多久，而最近才在 Chrome 中也出现。

欢迎来到我们每天都要面对的跨浏览器支持地狱 😛

明确一下，这是一个有效的问题，所以感谢你的发帖。我很乐意修复它，但问题在于我们的选择仅限于绕过浏览器问题。

更改动画会为所有在过去 5 年多使用 Discourse 的用户引入一种新的模式。更改深色主题的颜色也会影响所有使用 Discourse 的网站。这两者都不是我想考虑的方案。

我并不是说我已经穷尽了所有可能改善此问题的变通方法，但我所知道的那些方法都没有产生任何效果。

话虽如此，除非我之后发现任何变通方法，我建议我们先等待 3 个月，届时再重新审视这个问题。

---

<div class="post-metadata">

**Author:** ![seanblue](https://avatars.discourse-cdn.com/v4/letter/s/dc4da7/32.png) [@seanblue](https://meta.discourse.org/u/seanblue)\
**Post date:** [2020年二月23日 21:19 UTC](https://meta.discourse.org/t/selected-post-color-fade-in-is-jittery-under-dark-themes/132705/8 "2020-02-23T21:19:32Z")

</div>

> [@Johani](#):
>
> 话虽如此，在我可能发现的任何变通方法之外，我建议我们先等上大约 3 个月，然后再重新审视这个问题。

已经过去三个多月了，所以我打算来跟进一下。这个问题在 Chrome 中依然存在，在 Firefox 中似乎也会出现。如果您仍然没有可行的变通方案，那也没关系，但我觉得提醒一下总没有坏处。

---

<div class="post-metadata">

**Author:** ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)\
**Post date:** [2020年二月23日 23:57 UTC](https://meta.discourse.org/t/selected-post-color-fade-in-is-jittery-under-dark-themes/132705/9 "2020-02-23T23:57:13Z")

</div>

这既针对深色主题，又针对特定浏览器，因此我很难对此产生哪怕一丝一毫的关心。

---

<div class="post-metadata">

**Author:** ![seanblue](https://avatars.discourse-cdn.com/v4/letter/s/dc4da7/32.png) [@seanblue](https://meta.discourse.org/u/seanblue)\
**Post date:** [2020年二月24日 00:13 UTC](https://meta.discourse.org/t/selected-post-color-fade-in-is-jittery-under-dark-themes/132705/10 "2020-02-24T00:13:46Z")

</div>

既然在 Chrome、Edge 和 Firefox 中都会发生，这真的只是特定于某个浏览器的问题吗？况且，使用深色主题的人不是很多吗？

---

<div class="post-metadata">

**Author:** ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)\
**Post date:** [2020年二月24日 00:15 UTC](https://meta.discourse.org/t/selected-post-color-fade-in-is-jittery-under-dark-themes/132705/11 "2020-02-24T00:15:42Z")

</div>

我没看到其他人抱怨，所以没有？

---

<div class="post-metadata">

**Author:** ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)\
**Post date:** [2020年二月24日 01:04 UTC](https://meta.discourse.org/t/selected-post-color-fade-in-is-jittery-under-dark-themes/132705/13 "2020-02-24T01:04:31Z")

</div>

Sean 是我们托管的一个网站的成员。

这并非“付费参与”的问题，而是一个鲜为人知的浏览器 bug。我们这里使用的是 CSS 动画，而非某种 jQuery hack 动画。我认为对于这种非常轻微的显示问题，并没有显而易见的修复方案。

---

<div class="post-metadata">

**Author:** ![seanblue](https://avatars.discourse-cdn.com/v4/letter/s/dc4da7/32.png) [@seanblue](https://meta.discourse.org/u/seanblue)\
**Post date:** [2020年二月24日 01:08 UTC](https://meta.discourse.org/t/selected-post-color-fade-in-is-jittery-under-dark-themes/132705/14 "2020-02-24T01:08:57Z")

</div>

别担心，我只是想确认一下。

---

<div class="post-metadata">

**Author:** ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)\
**Post date:** [2020年二月24日 05:51 UTC](https://meta.discourse.org/t/selected-post-color-fade-in-is-jittery-under-dark-themes/132705/16 "2020-02-24T05:51:10Z")

</div>

如果您对此感到担忧，建议您向能够真正修复该错误的浏览器开发者报告。上游已发布一个可复现的示例，方便您进行报告。

---

<div class="post-metadata">

**Author:** ![Justin\_Vega](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/justin_vega/32/159021_2.png) [@Justin\_Vega](https://meta.discourse.org/u/Justin_Vega)\
**Post date:** [2020年二月24日 21:30 UTC](https://meta.discourse.org/t/selected-post-color-fade-in-is-jittery-under-dark-themes/132705/17 "2020-02-24T21:30:24Z")

</div>

@seanblue，您可能想查看一下这些关于错误报告的链接。

> **Firefox**
>
> [Bug Writing Guidelines](https://developer.mozilla.org/en-US/docs/Mozilla/QA/Bug_writing_guidelines)
> 
> [Bugzilla Main Page](https://bugzilla.mozilla.org/home)

> **Google Chrome**
>
> [Report an issue or send feedback on Chrome - Computer - Google Chrome Help](https://support.google.com/chrome/answer/95315?co=GENIE.Platform%3DDesktop&hl=en)

> **Microsoft Edge**
>
> Alt + F \> 设置 \> 外观 \> 启用“显示反馈”按钮 \> 点击浏览器右上角的“显示反馈”按钮 \> 报告错误

希望这些信息对您有所帮助！😁
