크롬 모바일 88.0.4323.152 에서
.ruler.ruler-h.ruler-pc{
background:
repeating-linear-gradient(90deg,transparent 0, transparent calc(10pc - 1px),#666 calc(10pc - 1px), #666 10pc,transparent 0, transparent 10pc ) 0px 100% / 100% 10px no-repeat
, repeating-linear-gradient(90deg,transparent 0, transparent calc(5pc - 1px),#999 calc(5pc - 1px), #999 5pc,transparent 0, transparent 10pc ) 0px 100% / 100% 6px no-repeat
, repeating-linear-gradient(90deg,
transparent 0pc, transparent calc(1pc - 1px), #ccc calc(1pc - 1px), #ccc 1pc,
transparent 1pc, transparent calc(2pc - 1px), #ccc calc(2pc - 1px), #ccc 2pc,
transparent 2pc, transparent calc(3pc - 1px), #ccc calc(3pc - 1px), #ccc 3pc,
transparent 3pc, transparent calc(4pc - 1px), #ccc calc(4pc - 1px), #ccc 4pc,
transparent 0pc, transparent 5pc
) 0px 100% / 100% 3px no-repeat
;
}
이런 식으로 사용하고 너비를 아주 길게 할 경우, 몇몇 repeating-linear-gradient 는 뒤에서는 출력 안되는 버그가 있다.