Полосы CSS не отображаются правильно в Chrome

У меня есть веб-сайт, на котором я пытаюсь получить фон из тонких полосок, используя два градиента. Я добился этого, используя этот CSS:

 background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 2px,
        #101010 4px,
        #737373 4px 
       ),
        repeating-radial-gradient(
        #616161,
        #222222 
        );

В Firefox полосы выглядят великолепно, но когда я переношу их в Chrome, они выглядят ужасно.

Если вы откроете эту ссылку в Chrome, вы сможете увидеть, что я имею в виду.

JS Fiddle — некорректно отображается в Chrome

Я пытался найти решение в Интернете, и ближе всего я пришел к этому сообщению:

css полосатые bg странности в Chrome

Я применил код из сообщения выше в свой CSS, добавив радиальный градиент. Вот мой JS Fiddle, чтобы показать мой результат.

JS Fiddle — Strange Checkerboard

Когда я наношу его, как вы увидите или видели, я получаю странный шахматный узор. Как получить наклонный линейный градиент сверху и радиальный градиент снизу, чтобы они правильно отображались во всех браузерах?

Я даже пытался объединить CSS, на который я смотрел, с блоком «webkit», и это вообще не сработало:

    html {
background-image: -webkit-repeating-linear-gradient(-45deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .1) 50%), repeating-radial-gradient(#616161, #222222);
background-image: -moz-repeating-linear-gradient(-45deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .1) 50%, repeating-radial-gradient(#616161, #222222);
background-image: -ms-repeating-linear-gradient(-45deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .1) 50%), repeating-radial-gradient(#616161, #222222);
background-image: -o-repeating-linear-gradient(-45deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .1) 50%), repeating-radial-gradient(#616161, #222222);
background-image: repeating-linear-gradient(-45deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .1) 50%, repeating-radial-gradient(#616161, #222222);

-webkit-background-size: 4px 4px;
-moz-background-size: 4px 4px;
-o-background-size: 4px 4px;
background-size: 4px 4px; 
};

Любая помощь будет принята с благодарностью! Я искал часы, пробовал много вещей... и не могу получить эту работу!


html css radial-gradients linear-gradients
person Brenda813    schedule 08.08.2015    source источник
comment
Итак, вам нужно то же самое, что я вижу в других браузерах, кроме Chrome, как в первом варианте?   -  person AleshaOleg    schedule 08.08.2015
comment
Я вижу, как в Firefox разрывается флажок, но в Chrome все выглядит нормально.   -  person Alexander O'Mara    schedule 08.08.2015
comment
В качестве примечания для человека, который придумывает решение, я открыл ссылку на скрипку, и она отлично выглядит для меня в Chrome, но хуже в Firefox, полная противоположность описанию OP, я с нетерпением жду ответа здесь.   -  person gwar9    schedule 08.08.2015
comment
АлешаОлег - Я ищу узор в тонкую полоску с изменяемым размером, с эффектом радиального градиента. Я пытаюсь заставить его выглядеть чистым во всех браузерах. На моем компьютере он не выглядит чистым в Chrome.   -  person Brenda813    schedule 08.08.2015

Ответы (1)


arrow_upward
1
arrow_downward 

   background: -webkit-repeating-linear-gradient(
   45deg, transparent, transparent 2px, #101010 4px, #737373 4px
   ),
   -webkit-repeating-radial-gradient(#616161, #222222); background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 2px,
    #101010 4px,
    #737373 4px 
   ),
    repeating-radial-gradient(
    #616161,
    #222222 
    );

Попробуйте это на .

И порекомендуйте очень полезный сайт префикс вашего css

И совместимость браузеров

person Jose Mar    schedule 08.08.2015
comment
К сожалению, это не сработало, но кажется, что эти ссылки будут очень полезными/полезными. Спасибо! - person Brenda813; 08.08.2015