Menu
I'm to use a linear gradient as the background for my body. It works in Safari but not in Chrome. I've searched Stack Overflow and nothing has worked so far for me. It has only worked in browsers other than Chrome (Chrome 49).
The code I'm trying to use is made from a generator that is meant to support all browsers.
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);
}
Below is the HTML to reproduce the problem:
<!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>
Any suggestions would be great. Thanks.
452
Normally, the body tag by itself doesn't have any height and so the gradients won't show up and we have to either add some content to it (or) give it some explicit height. Adding a fixed height value may not always be possible and so it is better to add a min-height: 100vh (that is, the height will atleast be as much as the viewport's height).
Note: The behavior is consistent across IE, Edge, Firefox and Chrome. I am trying to find why Safari handles it differently. I will edit the information into the answer once I have it.
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);
}If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
