Градиент CSS не работает в Chrome 49

Я буду использовать линейный градиент в качестве фона для моего body. Он работает в Safari, но не в Chrome. Я искал переполнение стека, и пока ничего не сработало для меня. Он работал только в браузерах, отличных от Chrome (Chrome 49).

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

body {
    background: rgba(121, 91, 176, 1);
    background: -moz-linear-gradient(45deg, rgba(121, 91, 176, 1) 0%, rgba(74, 193, 255, 1) 66%, rgba(76, 234, 255, 1) 92%, rgba(76, 234, 255, 1) 100%);
    background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(121, 91, 176, 1)), color-stop(66%, rgba(74, 193, 255, 1)), color-stop(92%, rgba(76, 234, 255, 1)), color-stop(100%, rgba(76, 234, 255, 1)));
    background: -webkit-linear-gradient(45deg, rgba(121, 91, 176, 1) 0%, rgba(74, 193, 255, 1) 66%, rgba(76, 234, 255, 1) 92%, rgba(76, 234, 255, 1) 100%);
    background: -o-linear-gradient(45deg, rgba(121, 91, 176, 1) 0%, rgba(74, 193, 255, 1) 66%, rgba(76, 234, 255, 1) 92%, rgba(76, 234, 255, 1) 100%);
    background: -ms-linear-gradient(45deg, rgba(121, 91, 176, 1) 0%, rgba(74, 193, 255, 1) 66%, rgba(76, 234, 255, 1) 92%, rgba(76, 234, 255, 1) 100%);
    background: linear-gradient(45deg, rgba(121, 91, 176, 1) 0%, rgba(74, 193, 255, 1) 66%, rgba(76, 234, 255, 1) 92%, rgba(76, 234, 255, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#795bb0', endColorstr='#4ceaff', GradientType=1);
}

Ниже приведен HTML-код для воспроизведения проблемы:

<!DOCTYPE html>
<html>
  <head>
    <title>Site</title>
    <meta name="robots" content="noindex">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css" />
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  </head>
  <body>
    <!-- JS WARN -->
    <div>
      <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/Verpz/Javascript-Disabled-Warning-Popup/b10b9ebe28a92ffe746eb7e6fb6e0d3497c3afdd/js-warn.css">
      <input type="checkbox" id="js-hide" />
      <div class="js-warn" id="js-warn-exit"><h1>Javascript Is Disabled</h1><p>Javascript seems to be disabled. This will break some site features.</p>
      <p>To enable Javascript click <a href="http://www.enable-javascript.com/" target="_blank">here</a></p><label for="js-hide">Close</label></div>
      <script>var jswarn = document.getElementById("js-warn-exit"); jswarn.parentNode.removeChild(jswarn);</script>
    </div>
    <!-- /JS WARN -->
  </body>
</html>

Любые предложения были бы замечательными. Спасибо.


google-chrome html gradient css linear-gradients
person Verpz    schedule 19.03.2016    source источник
comment
У меня нет v49, но в предыдущей версии и последней версии dev-m v50 все работает нормально. Какой результат вы видите? Можете воссоздать это на скрипке и показать нам?   -  person Harry    schedule 19.03.2016
comment
Я получаю пустой экран. Вообще ничего не происходит. jsfiddle.net/dye0vvky/1 Он отлично работает в других браузерах и в скрипке.   -  person Verpz    schedule 19.03.2016
comment
Работает ли это в вашем Chrome? Или вы все еще видите пустую страницу?   -  person Harry    schedule 19.03.2016
comment
Вы хотите, чтобы я проверил css в скрипке?   -  person Verpz    schedule 19.03.2016
comment
Предоставленная скрипка была неполной - jsfiddle.net/dye0vvky/3 это работает в Chrome - Версия 49.0.2623.87 м   -  person Paulie_D    schedule 19.03.2016
comment
@Verpz: Во-первых, выдает ли скрипка требуемый результат? Затем попробуйте это на своей странице.   -  person Harry    schedule 19.03.2016
comment
Скрипки работают, нормально отображаются. Но в локальном html-файле это не работает. Однако этот же файл работает и в других браузерах.   -  person Verpz    schedule 19.03.2016
comment
@Verpz: если мы не увидим проблему, мы не сможем ее отладить.   -  person Harry    schedule 19.03.2016
comment
Хотите мой html и css файл?   -  person Verpz    schedule 19.03.2016
comment
Да, опубликуйте его, и мы посмотрим, поможет ли это.   -  person Harry    schedule 19.03.2016
comment
Извините, это довольно плохой способ поделиться им, но я не могу использовать JSFiddle, потому что он не принимает теги ‹head› и т. д. drive.google.com/ @Harry   -  person Verpz    schedule 19.03.2016
comment
Давайте продолжим обсуждение в чате.   -  person Verpz    schedule 19.03.2016

Ответы (1)


arrow_upward
3
arrow_downward

Обычно тег body сам по себе не имеет высоты, поэтому градиенты не отображаются, и нам нужно либо добавить к нему некоторый контент (или) задать ему определенную высоту в явном виде. Добавление фиксированного значения высоты не всегда возможно, поэтому лучше добавить min-height: 100vh (то есть высота будет как минимум равна высоте области просмотра).

Примечание. Поведение одинаково для IE, Edge, Firefox и Chrome. Я пытаюсь понять, почему Safari справляется с этим по-другому. Я отредактирую информацию в ответе, как только она у меня будет.

body {
  min-height: 100vh;
  background: rgba(121, 91, 176, 1);
  background: -moz-linear-gradient(45deg, rgba(121, 91, 176, 1) 0%, rgba(74, 193, 255, 1) 66%, rgba(76, 234, 255, 1) 92%, rgba(76, 234, 255, 1) 100%);
  background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(121, 91, 176, 1)), color-stop(66%, rgba(74, 193, 255, 1)), color-stop(92%, rgba(76, 234, 255, 1)), color-stop(100%, rgba(76, 234, 255, 1)));
  background: -webkit-linear-gradient(45deg, rgba(121, 91, 176, 1) 0%, rgba(74, 193, 255, 1) 66%, rgba(76, 234, 255, 1) 92%, rgba(76, 234, 255, 1) 100%);
  background: -o-linear-gradient(45deg, rgba(121, 91, 176, 1) 0%, rgba(74, 193, 255, 1) 66%, rgba(76, 234, 255, 1) 92%, rgba(76, 234, 255, 1) 100%);
  background: -ms-linear-gradient(45deg, rgba(121, 91, 176, 1) 0%, rgba(74, 193, 255, 1) 66%, rgba(76, 234, 255, 1) 92%, rgba(76, 234, 255, 1) 100%);
  background: linear-gradient(45deg, rgba(121, 91, 176, 1) 0%, rgba(74, 193, 255, 1) 66%, rgba(76, 234, 255, 1) 92%, rgba(76, 234, 255, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#795bb0', endColorstr='#4ceaff', GradientType=1);
}

person Harry    schedule 19.03.2016