2016-03-19 11 views
3

bodyの背景として直線グラデーションを使用します。それははSafariでは動作しますが、Chromeでは動作しません Stack Overflowを検索しましたが、今まで私のために何もしていませんでした。これはChrome以外のブラウザ(Chrome 49)でのみ機能しています。ChromeでCSSグラデーションが機能しない49

私が使用しようとしているコードは、すべてのブラウザをサポートするためのものです。

<!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> 

任意の提案は素晴らしいことだ:以下

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です。ありがとう。

+0

私はV49を持っていないが、以前のバージョンと最新のDEV-MのV50のバージョンでは正常に動作しています。あなたはどんな出力を見ていますか?それをフィドルで再現して私たちに見せてもらえますか? – Harry

+0

空白の画面が表示されます。何も起こりません。 https://jsfiddle.net/dye0vvky/1/他のブラウザやフィドルでうまく動作します。 – Verpz

+0

[this](https://jsfiddle.net/dye0vvky/2/)はあなたのChromeで動作しますか?それとも空白のページがまだ表示されますか? – Harry

答えて

2

通常、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); 
 
}

関連する問題