CSS3 グラデーションで色の間隔を 1px 未満にすると、Firefox だとグラデーション表示されない。 が、高DPI環境(所謂Retina Display等)だと表示されるらしい。

  5px
  1px
  0.5px
  0.333px
  0.25px
  0.2px

高DPI環境(所謂Retina Display等)でなかったとしても、ブラウザの拡大縮小によってグラデーションが表示されるようになったりするようだ。

一方で Google Chrome はそんなのおかまいなしにグラデーション表示を試みているようである。が、当然デバイスの限界を超えているので表示は何かしら化けて表示されていることになる。普通キニシナイが。

HTML5の規格としてFirefoxのような挙動は許可されているような記述されている。 (SHALLではなくwouldなので明記されていない? Google Chromeのような挙動がいいのかわるいのかも言及していていない?) でも、色の混合をやっているブラウザはあるのかなぁ。

For example, the following gradient is rendered as a solid light-purple image (equal to rgb(75%,50%,75%)): 
repeating-linear-gradient(red 0px, white 0px, blue 0px);

The following gradient would render the same as the previous under normal circumstances (because desktop monitors can’t faithfully render color-stops 1/10th of a pixel apart), but would render as a normal repeating gradient if, for example, the author applied "zoom:100;" to the element on which the gradient appears:

repeating-linear-gradient(red 0px, white .1px, blue .2px);

参考文献