背景图像重复图案在图案尺寸较小时会出现副作用

我正在尝试使用背景图像创建表格图案，当单元格大小为50px*50px时效果很好，但当我低于25px*25px时，有几行开始消失或晕倒。

此&；背后的原因是什么？如何修复？

At 25px * 25px

At 50px * 50px

div {
  background: pink;
  height: 713px;
  width: 400px;
  background-size: 25px 25px;
  /*background-size: 50px 50px;*/
  background-image: url("https://svgshare.com/i/_GG.svg");
}

<div></div>

代码：https://codepen.io/arnavsingh/pen/bGWPqXP

注意：使用浏览器设置放大时会修复此问题

---

解决方案

此类任务现在很琐碎，只有一个渐变：

div {
  background: pink;
  height: 713px;
  width: 400px;
  --b:1px; /* adjust this */
  background:
    conic-gradient(at bottom var(--b) right var(--b),#000 75%,#0000 0) 
    0 0/25px 25px /* and this */
    pink;
}

<div></div>