Повторяя линейный фон отображается неправильно

Question

Недавно я обнаружил странное отображающее проблему в Chrome при попытке установить повторяющийся градиент на строке таблицы:

see the Demo

<table id="one"> 
    <tr><td>123</td><td>asd</td><td>brgfbb</td><td>sdf</td><td>bgfb</td></tr> 
</table> 

#one tr{ 
    background-image: repeating-linear-gradient(135deg, 
        #bada55, #bada55 5px, 
        transparent 5px, transparent 10px); 
} 

Размещение такого градиента на td элемент, конечно, не будет работать. Однако, при размещении градиента на tr градиент странно нарушается, как если бы он был помещен на td с. Разрывы - это именно то место, где касаются ячейки таблицы. При размещении градиента на столе полосы имеют неправильный размер.

Chrome:

В Firefox все выглядит красиво:

P.S. IE10 имеет те же проблемы с градиентом на tr, прямо на элементе таблицы все выглядит нормально.

Вы знаете какие-либо обходные пути для этой проблемы?

Answer 1

Это можно устранить, просто применив css к используемому вами идентификатору - #one или #two. jsfiddle здесь демонстрации - вы можете увидеть, что я изменил его от

#one tr{ 
    background-image: repeating-linear-gradient(135deg, #bada55, #bada55 5px, transparent 5px, transparent 10px); 
    padding:0;margin:0; 
} 

в

#one { 
    background-image: repeating-linear-gradient(135deg, #bada55, #bada55 5px, transparent 5px, transparent 10px); 
    padding:0;margin:0; 
} 

И не более сказывался фоновое изображение :)