Странные артефакты с прозрачным png фоном-изображением в Chrome

Question

Я пытаюсь создать шаблон с png с прозрачным фоном. Он отлично работает как в Firefox, так и в Safari, но в Chrome он отображается с некоторым пробелом между ними.

код воспроизвести проблему довольно просто:

div { 
    background: url('http://vps97368.ovh.net/montessori.it/wp-content/themes/montessori/images/pattern-bg.png'); 
    height: 500px; 
} 

<div>blabla</div> 

И я создал перо, чтобы показать: http://codepen.io/anon/pen/RPGOyx

Схема должна отображать простые параллельные диагональные линии, а на Chrome I увидеть их как это:

Я испытываю проблемы на сетчатке дисплей. Не уверен в других.

Answer 1

Сделайте изображение больше. Я использовал 25x25 для этого:

http://codepen.io/anon/pen/BNmVXQ

div { 
    background: url('https://s3-us-west-1.amazonaws.com/haven-images/pattern-bg.png'); 
    height: 500px; 
}