CSS渐变无法刷新答案

【问题标题】：CSS gradient impossible to refreshCSS渐变无法刷新
【发布时间】：2017-07-18 04:55:06
【问题描述】：

我创建了代表标尺的 CSS 渐变。渐变是通过JS生成的。

问题

生成的标尺没问题。当用户调整窗口大小时，问题就开始了。你可以在 sn-p 中试试这个。看起来，一旦渲染，渐变就会被大量缓存，因此在调整父宽度的变化时会出现问题。一些渐变线正在消失，一些正在改变它们的宽度。问题涉及 Chrome 和 Firefox。我尝试的所有解决方案都仅在 Fx 上进行了测试。我没有检查其他浏览器。

片段

片段开始渲染很糟糕（由于其性质，在网站上它按预期工作），但调整窗口大小仍然是问题。

.ruler {
  height: 20px;
  background-image: linear-gradient(to right, rgb(204, 204, 204) 0%, rgb(204, 204, 204) 0.205761%, transparent 0.205761%, transparent 1.99588%, rgb(204, 204, 204) 1.99588%, rgb(204, 204, 204) 2.20165%, transparent 2.20165%, transparent 3.99177%, rgb(204, 204, 204) 3.99177%, rgb(204, 204, 204) 4.19753%, transparent 4.19753%, transparent 5.98765%, rgb(204, 204, 204) 5.98765%, rgb(204, 204, 204) 6.19342%, transparent 6.19342%, transparent 7.98354%, rgb(204, 204, 204) 7.98354%, rgb(204, 204, 204) 8.1893%, transparent 8.1893%, transparent 9.97942%, rgb(204, 204, 204) 9.97942%, rgb(204, 204, 204) 10.1852%, transparent 10.1852%, transparent 11.9753%, rgb(204, 204, 204) 11.9753%, rgb(204, 204, 204) 12.1811%, transparent 12.1811%, transparent 13.9712%, rgb(204, 204, 204) 13.9712%, rgb(204, 204, 204) 14.177%, transparent 14.177%, transparent 15.9671%, rgb(204, 204, 204) 15.9671%, rgb(204, 204, 204) 16.1728%, transparent 16.1728%, transparent 17.963%, rgb(204, 204, 204) 17.963%, rgb(204, 204, 204) 18.1687%, transparent 18.1687%, transparent 19.9588%, rgb(204, 204, 204) 19.9588%, rgb(204, 204, 204) 20.1646%, transparent 20.1646%, transparent 21.9547%, rgb(204, 204, 204) 21.9547%, rgb(204, 204, 204) 22.1605%, transparent 22.1605%, transparent 23.9506%, rgb(204, 204, 204) 23.9506%, rgb(204, 204, 204) 24.1564%, transparent 24.1564%, transparent 25.9465%, rgb(204, 204, 204) 25.9465%, rgb(204, 204, 204) 26.1523%, transparent 26.1523%, transparent 27.9424%, rgb(204, 204, 204) 27.9424%, rgb(204, 204, 204) 28.1481%, transparent 28.1481%, transparent 29.9383%, rgb(204, 204, 204) 29.9383%, rgb(204, 204, 204) 30.144%, transparent 30.144%, transparent 31.9342%, rgb(204, 204, 204) 31.9342%, rgb(204, 204, 204) 32.1399%, transparent 32.1399%, transparent 33.93%, rgb(204, 204, 204) 33.93%, rgb(204, 204, 204) 34.1358%, transparent 34.1358%, transparent 35.9259%, rgb(204, 204, 204) 35.9259%, rgb(204, 204, 204) 36.1317%, transparent 36.1317%, transparent 37.9218%, rgb(204, 204, 204) 37.9218%, rgb(204, 204, 204) 38.1276%, transparent 38.1276%, transparent 39.9177%, rgb(204, 204, 204) 39.9177%, rgb(204, 204, 204) 40.1235%, transparent 40.1235%, transparent 41.9136%, rgb(204, 204, 204) 41.9136%, rgb(204, 204, 204) 42.1193%, transparent 42.1193%, transparent 43.9095%, rgb(204, 204, 204) 43.9095%, rgb(204, 204, 204) 44.1152%, transparent 44.1152%, transparent 45.9053%, rgb(204, 204, 204) 45.9053%, rgb(204, 204, 204) 46.1111%, transparent 46.1111%, transparent 47.9012%, rgb(204, 204, 204) 47.9012%, rgb(204, 204, 204) 48.107%, transparent 48.107%, transparent 49.8971%, rgb(204, 204, 204) 49.8971%, rgb(204, 204, 204) 50.1029%, transparent 50.1029%, transparent 51.893%, rgb(204, 204, 204) 51.893%, rgb(204, 204, 204) 52.0988%, transparent 52.0988%, transparent 53.8889%, rgb(204, 204, 204) 53.8889%, rgb(204, 204, 204) 54.0947%, transparent 54.0947%, transparent 55.8848%, rgb(204, 204, 204) 55.8848%, rgb(204, 204, 204) 56.0905%, transparent 56.0905%, transparent 57.8807%, rgb(204, 204, 204) 57.8807%, rgb(204, 204, 204) 58.0864%, transparent 58.0864%, transparent 59.8765%, rgb(204, 204, 204) 59.8765%, rgb(204, 204, 204) 60.0823%, transparent 60.0823%, transparent 61.8724%, rgb(204, 204, 204) 61.8724%, rgb(204, 204, 204) 62.0782%, transparent 62.0782%, transparent 63.8683%, rgb(204, 204, 204) 63.8683%, rgb(204, 204, 204) 64.0741%, transparent 64.0741%, transparent 65.8642%, rgb(204, 204, 204) 65.8642%, rgb(204, 204, 204) 66.07%, transparent 66.07%, transparent 67.8601%, rgb(204, 204, 204) 67.8601%, rgb(204, 204, 204) 68.0658%, transparent 68.0658%, transparent 69.856%, rgb(204, 204, 204) 69.856%, rgb(204, 204, 204) 70.0617%, transparent 70.0617%, transparent 71.8519%, rgb(204, 204, 204) 71.8519%, rgb(204, 204, 204) 72.0576%, transparent 72.0576%, transparent 73.8477%, rgb(204, 204, 204) 73.8477%, rgb(204, 204, 204) 74.0535%, transparent 74.0535%, transparent 75.8436%, rgb(204, 204, 204) 75.8436%, rgb(204, 204, 204) 76.0494%, transparent 76.0494%, transparent 77.8395%, rgb(204, 204, 204) 77.8395%, rgb(204, 204, 204) 78.0453%, transparent 78.0453%, transparent 79.8354%, rgb(204, 204, 204) 79.8354%, rgb(204, 204, 204) 80.0412%, transparent 80.0412%, transparent 81.8313%, rgb(204, 204, 204) 81.8313%, rgb(204, 204, 204) 82.037%, transparent 82.037%, transparent 83.8272%, rgb(204, 204, 204) 83.8272%, rgb(204, 204, 204) 84.0329%, transparent 84.0329%, transparent 85.823%, rgb(204, 204, 204) 85.823%, rgb(204, 204, 204) 86.0288%, transparent 86.0288%, transparent 87.8189%, rgb(204, 204, 204) 87.8189%, rgb(204, 204, 204) 88.0247%, transparent 88.0247%, transparent 89.8148%, rgb(204, 204, 204) 89.8148%, rgb(204, 204, 204) 90.0206%, transparent 90.0206%, transparent 91.8107%, rgb(204, 204, 204) 91.8107%, rgb(204, 204, 204) 92.0165%, transparent 92.0165%, transparent 93.8066%, rgb(204, 204, 204) 93.8066%, rgb(204, 204, 204) 94.0123%, transparent 94.0123%, transparent 95.8025%, rgb(204, 204, 204) 95.8025%, rgb(204, 204, 204) 96.0082%, transparent 96.0082%, transparent 97.7984%, rgb(204, 204, 204) 97.7984%, rgb(204, 204, 204) 98.0041%, transparent 98.0041%, transparent 99.7942%, rgb(204, 204, 204) 99.7942%, rgb(204, 204, 204))

<div>
  <div class="ruler"></div>
</div>

尝试过的解决方案

我已经尝试了几乎所有我能找到的 SO 解决方案，包括：

转换：translateZ
在标尺内包含新标签，并删除它
向 HTML 代码添加新标签
隐藏和显示标尺

我什至尝试过一些疯狂的解决方案，比如改变渐变的参数：

角度（改变角度会旋转扭曲的线条，并不能解决整个问题）
将色标位置更改 0.01%
从右到左绘制所有内容

更疯狂的是：即使完全移除渐变，插入另一个，然后复制粘贴移除的渐变也不会刷新。

只有 F5 有帮助。

有没有办法刷新这样的东西？

【问题讨论】：

据我所知，它的行为符合预期。如果将元素设置为屏幕宽度的百分比，则在调整窗口大小时它会改变大小。也许您应该考虑另一种方法，例如使用类似于以下的方法：codepen.io/j4n/pen/wBVVVN
它没有“按预期”工作，因为如果预期的话，F5 不应该重置行。谢谢你的链接。这让我知道如何以另一种方式解决它。使用后台重复的想法太愚蠢了，我什至没有想到。
糟糕。对不起，@HenrikClausen。在您提供的链接中，在调整窗口大小时出现完全相同的错误。

标签： javascript html css

【解决方案1】：

也许box-shadow 和vw 单位可以做到，如果想法是总是有相同数量的条纹。

.ruler {
  height:20px;
  border-left:3px solid rgb(204, 204, 204);/* border size will give the width for the shadows */
  width:0;
  box-shadow: 2vw 0  rgb(204, 204, 204),
     2vw 0  rgb(204, 204, 204),
     4vw 0  rgb(204, 204, 204),
     6vw 0  rgb(204, 204, 204),
     8vw 0  rgb(204, 204, 204),
     10vw 0  rgb(204, 204, 204),
     12vw 0  rgb(204, 204, 204),
     14vw 0  rgb(204, 204, 204),
     16vw 0  rgb(204, 204, 204),
     18vw 0  rgb(204, 204, 204),
     20vw 0  rgb(204, 204, 204),
     22vw 0  rgb(204, 204, 204),
     24vw 0  rgb(204, 204, 204),
     26vw 0  rgb(204, 204, 204),
     28vw 0  rgb(204, 204, 204),
     30vw 0  rgb(204, 204, 204),
     32vw 0  rgb(204, 204, 204),
     34vw 0  rgb(204, 204, 204),
     36vw 0  rgb(204, 204, 204),
     38vw 0  rgb(204, 204, 204),
     40vw 0  rgb(204, 204, 204),
     42vw 0  rgb(204, 204, 204),
     44vw 0  rgb(204, 204, 204),
     46vw 0  rgb(204, 204, 204),
     48vw 0  rgb(204, 204, 204),
     50vw 0  rgb(204, 204, 204),
     52vw 0  rgb(204, 204, 204),
     54vw 0  rgb(204, 204, 204),
     56vw 0  rgb(204, 204, 204),
     58vw 0  rgb(204, 204, 204),
     60vw 0  rgb(204, 204, 204),
     62vw 0  rgb(204, 204, 204),
     64vw 0  rgb(204, 204, 204),
     66vw 0  rgb(204, 204, 204),
     68vw 0  rgb(204, 204, 204),
     70vw 0  rgb(204, 204, 204),
     72vw 0  rgb(204, 204, 204),
     74vw 0  rgb(204, 204, 204),
     76vw 0  rgb(204, 204, 204),
     78vw 0  rgb(204, 204, 204),
     80vw 0  rgb(204, 204, 204),
     82vw 0  rgb(204, 204, 204),
     84vw 0  rgb(204, 204, 204),
     86vw 0  rgb(204, 204, 204),
     88vw 0  rgb(204, 204, 204),
     90vw 0  rgb(204, 204, 204),
     92vw 0  rgb(204, 204, 204),
     94vw 0  rgb(204, 204, 204),
     96vw 0  rgb(204, 204, 204),
     98vw 0  rgb(204, 204, 204),
     calc(100vw - 3px) 0  rgb(204, 204, 204);
}

<div>
  <div class="ruler"></div>
</div>

【讨论】：

这是个不错的主意，但我需要 % 单位，这对于 box-shadow 来说是不可能的（奇怪）。

【解决方案2】：

现在我已经创建了线性渐变的硬计算 px 值，并在调整窗口大小时刷新它们（节流设置为 50 毫秒）。似乎工作得很好。代码变化不大（JS更简单），就不贴了。

【讨论】：