CSS3 Gradient not working in Firefox
try this... its cross browser even works in ie6
.bodyGradient {
position: absolute;
top: 0;
left: 0;
border-top: 3px solid #93ae59;
z-index: -1;
background: -moz-linear-gradient(top, #cfddac, #fff);
background: -webkit-gradient(linear, left top, left bottom, from(#cfddac), to(#fff));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cfddac', endColorstr='#ffffff');
background: -o-linear-gradient(rgb(207,221,172),rgb(255,255,255));
}
Css linear gradient not working as expected in mozilla firefox
You need to ensure the element you're setting a background on has a height, either explicitly set or due to content.
.test { width: 100px; background: linear-gradient(180deg, black 20%, darkorange); float: left;}#test1 { height:200px;}
<div class="test" id="test1">Test</div><div class="test">Test</div>
Linear gradient Firefox support
Please install the compass version ~1.0.0
To check the current version of compass you are using, type:
$ compass version
I updated my compass by uninstalling the current version and installing the latest version.
$ gem uninstall compass
$ gem install compass
OR
if you don't want to update you can simple use it without gradient direction.
background-image: linear-gradient(#659adc, #004ca2)
radial gradient not displaying correctly in firefox
You need to set a height on the body. Setting it to 100vh
will make the gradient cover the screen.
body{ background-color: blue; background: -moz-radial-gradient(center, ellipse cover, #0047ea 0%, #151515 100%); background: radial-gradient(#0047ea, #151515); z-index: 0; height: 100vh;}
Why does firefox not render this linear gradient when the background-size values exceed 255px?
Your issue is happening in Chrome (v.58 - 64-bit), on a Linux machine, too. The workaround is to modify your background-image
from:
background-image: repeating-linear-gradient(to right, transparent, transparent calc(100% - 1px), black calc(100% - 1px), black 100%), repeating-linear-gradient(to bottom, transparent, transparent calc(100% - 1px), black calc(100% - 1px), black 100%)
... to (all 1px
instances replaced by 2px
):
background-image: repeating-linear-gradient(to right, transparent, transparent calc(100% - 2px), black calc(100% - 2px), black 100%), repeating-linear-gradient(to bottom, transparent, transparent calc(100% - 2px), black calc(100% - 2px), black 100%)
...when between 256px and 511px. Haven't tested, but I assume ... - 3px...
is going to work up to 767px
.
Do you see a pattern here? As you'd expect, this works in Firefox too.
Why? Beats me! But I recon it has something to do with sub-pixel rendering. I know, it shouldn't (after all, you're deducting 1px
) but this is why web is grand, isn't it?
Related Topics
How to Color The Fontawesome Icon Colors
Helvetica Neue Light with @Font-Face .. Legal
CSS: Is It Correct That Text Content of a Div Overflows into The Padding
Globally Changing Default Style in Primefaces
Remove Row Lines in Twitter Bootstrap
Flash of Unstyled Content (Fouc) in Firefox Only? Is Ff Slow Renderer
Override Element.Style Using CSS
Breaking to a New Line with Inline-Block
How to Center Font Awesome Icons Horizontally
Sublime Text Wrap Selection with Snippet
How to Implement Fixed Sidebar Correctly
Simple_Form_For Rails Radio Button Inline
How to Space The Children of a Div with CSS
Prevent Box Shadow from Showing on a Specific Side
Set Max Height of Adsense Responsive Ad Unit
Childrens Selectors from Sibling Parent Divs Using CSS for Hover Effect