CSS Gradient funktioniert nicht in Chrome 49

Ich bin ein linearer Farbverlauf als Hintergrund für meine body verwenden. Es funktioniert in Safari aber nicht in Chrome. Ich habe Stack Overflow gesucht und bisher hat nichts für mich funktioniert. Es hat nur in anderen Browsern als Chrome (Chrome 49) funktioniert.CSS Gradient funktioniert nicht in Chrome 49

Der Code, den ich versuche zu verwenden, besteht aus einem Generator, der alle Browser unterstützen soll.

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); 
}

Unten finden Sie die HTML um das Problem zu reproduzieren:

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

Irgendwelche Vorschläge wäre toll. Vielen Dank.

Quelle

2016-03-19 Verpz

Ich habe v49 nicht aber in der vorherigen Version und die neuesten Entwickler-m v50 Version funktioniert es gut. Welche Ausgabe sehen Sie? Kannst du das in einer Geige nachbilden und uns zeigen? – Harry

Ich bekomme einen leeren Bildschirm. Es passiert überhaupt nichts. https://jsfiddle.net/dye0vvky/1/ Es funktioniert gut in anderen Browsern und in der Geige. – Verpz

Funktioniert [this] (https://jsfiddle.net/dye0vvky/2/) in Ihrem Chrome? Oder siehst du immer noch die leere Seite? – Harry

Normalerweise hat das body Tag selbst keine Höhe und daher werden die Verläufe nicht angezeigt und wir müssen entweder etwas Inhalt hinzufügen (oder) ihm eine explizite Höhe geben. Das Hinzufügen eines festen Höhenwerts ist möglicherweise nicht immer möglich und daher ist es besser, eine min-height: 100vh hinzuzufügen (das heißt, die Höhe wird zumindest so groß wie die Höhe des Ansichtsfensters sein).

Hinweis: Das Verhalten ist konsistent über IE, Edge, Firefox und Chrome. Ich versuche herauszufinden, warum Safari anders damit umgeht. Ich werde die Informationen in der Antwort bearbeiten, sobald ich sie habe.

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); 
 
}

Quelle

2016-03-19 09:06:14 Harry

CSS Gradient funktioniert nicht in Chrome 49

Antwort

Verwandte Themen