重复的背景渐变错位约1个像素

Question

注意：此网站仅适用于最新版Google Chrome稳定频道。

请在此处查看网站：http://3.cnxical.appspot.com

问题

其中一个背景图像是10vmax乘10vmax响应方形，重复以产生45度条纹的效果。它是使用渐变完成的。

问题所引用的当前问题是 错位大约1个像素 ，这些错误会持续存在，应该能够重现。

问题

如何获得渐变方块的结果，完美地排列在条纹中没有“突出的角落”或“未对齐的”块？ （工作“黑客”没问题）

相关CSS代码

    body {
                background-image: 
                    -webkit-linear-gradient(
                        bottom,
                        rgba(158,158,158,0.7) 0%,
                        rgba(5,5,5,0.7) 100%
                    ),
                    -webkit-linear-gradient(
                        45deg,
                        rgba(0,255,0,0.5) 25%,
                        rgba(0,0,0,0.5) 25%,
                        rgba(0,0,0,0.5) 50%,
                        rgba(0,255,0,0.5) 50%,
                        rgba(0,255,0,0.5) 75%,
                        rgba(0,0,0,0.5) 75%
                    );
                background-size: 100% 100%, 10vmax 10vmax;  
                background-repeat: no-repeat, repeat;   
            }

假设

这可能是由于四舍五入的精度损失，或者是由于％值与基于视图的值的组合。或者由于代码中的一些错误。

到目前为止尝试了什么

• 从视图相对于像素绝对值更改background-size值，即从vmax更改为px。 效果：错位仍然存在。

Answer 1

Fiddle link

<强> CSS

body{background-size: 100% 100%, 10.1vmax 10vmax; }

而不是

body{background-size: 100% 100%, 10vmax 10vmax;}

另外，我读到了vmax和vmin，并发现将它应用于body标签并不是一个好主意。参考：http://dev.opera.com/articles/view/css-viewport-units/