javascript - CSS渐变无法刷新

Question

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

问题

生成的标尺就OK了。当用户调整窗口大小时，问题就开始了。你可以在片段中试试这个。看起来，渐变在渲染后被大量缓存，因此在调整父级宽度的变化时存在问题。一些渐变线正在消失，一些正在改变它们的宽度。问题涉及 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 代码中添加新标签
• 隐藏和显示标尺

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

• Angular (改变 Angular 会旋转扭曲的线条，并不能解决整个问题)
• 改变色标的位置 0.01%
• 从右到左绘制所有内容

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

只有 F5 有帮助。

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

Answer 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>