css - Chrome linear gradient bug

Question

I have a repeating linear gradient like so:

.placeholder { 
background: repeating-linear-gradient(to top right, #7722AA 0px, #7722AA 6%, #CC44EE 6%, #CC44EE 13%) transparent;
border: 1px solid #000000;
float: left;
height: 110px;
width: 120px;
}

However in chrome, firefox on Mac and opera the appearance is skewed:

It works fine when in a square, but when it becomes a rectangle it becomes jagged - the same doesn't occur in all other browsers.

What causes this?

jsfiddle

Answer 1

1 つのアプローチは、グラデーションをもう少し広げることです。ストライプのいずれかの側に 2% のグラデーション トランジションを追加すると、エッジを除去することなくギザギザを隠すわずかなぼかしが得られます。

repeating-linear-gradient(to top right, #CC44EE 0px, #7722AA 2%, #7722AA 7%, #CC44EE 9%, #CC44EE 14%) transparent

http://jsfiddle.net/mblase75/FrT6Y/

ストライプ エッジに沿ってぼかしを増やすには、2% から 3% 以上に増やしてから、7% から 6% 以上に減らして、ストライプを同じサイズに保ちます。

repeating-linear-gradient(to top right, #CC44EE 0px, #7722AA 3%, #7722AA 6%, #CC44EE 9%, #CC44EE 14%) transparent

http://jsfiddle.net/mblase75/FrT6Y/5/