Why is Chrome bailing on this gradient setting? - css

I'm not getting a gradient in Chrome, but it works in Safari and Firefox. Here is the code:
.accounts-form #auth-form {
background: -moz-linear-gradient(#FEFEFE, #F4F4F4) repeat scroll 0 0 #F4F4F4;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
margin: 0;
padding: 0 0 40px;
}
It's that background: line that is causing the issue. I have seen other people have the issue with -webkit-gradient, just not -moz-linear-gradient.

The following is the syntax of how a gradient should be applied over a background.
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
It is usually advised to write the code in native version and then run it through http://prefixr.com/ to complete the code with all the browser compatible vendor-prefixes.

Chrome needs a -webkit-gradient; and Chrome 10+ uses a slightly different -webkit-gradient than some earlier versions I believe.
I use this CSS3 gradient generator - whether or not you use the generated code, it gives a good idea of all the properties you will need for each browser.
http://www.colorzilla.com/gradient-editor/

Related

CSS Border Image Gradient Not Working in Safari 10

I ran into an issue with Safari 10 and CSS border image gradients. It works in all other browsers, and even in Safari 9. It even shows up in Safari 10 in online simulators. Please see images below:
(I guess that's IE 11, not IE 10. Thanks for the correction!)
I assumed it was just my CSS so I really simplfied it and made a fiddle. You can see it at https://jsfiddle.net/tgbuxkee/
It's also generated below too.
div {
width: 200px;
height: 200px;
border: 6px solid transparent;
-moz-border-image: -moz-linear-gradient(top, #f0e2d0 0%, #c08b62 100%);
-webkit-border-image: -webkit-linear-gradient(top, #f0e2d0 0%, #c08b62 100%);
border-image: linear-gradient(to bottom, #f0e2d0 0%, #c08b62 100%);
-webkit-border-image-slice: 2;
border-image-slice: 2;
}
<div>
</div>
Does anybody have any idea why this could be happening? I know there is a bug with some image borders in Safari but I don't think that is the case here (maybe it is).
And guidance is helpful.
Thank you.
I have run into this issue in the past and remember reading somewhere on the web that avoiding the border-color: transparent setting would solve the problem. I don't remember where I read about it.
It seems like Safari 10 on Mac gives preference to the transparent border color over the border image and so displays nothing. Just setting the border-width and border-style alone would solve it. This solution works on other supported browsers also.
Tested on Chrome v56 (dev), Safari 10 (Mac), Safari 5 (Windows), Safari (iOS), IE11, Edge, Firefox 47.0.1, Opera 41.
Note: You've quoted IE10 in the question but as far as I know border-image doesn't work in it and so the given solution also doesn't.
div {
width: 200px;
height: 200px;
border-width: 6px;
border-style: solid;
-moz-border-image: -moz-linear-gradient(top, #f0e2d0 0%, #c08b62 100%);
-webkit-border-image: -webkit-linear-gradient(top, #f0e2d0 0%, #c08b62 100%);
border-image: linear-gradient(to bottom, #f0e2d0 0%, #c08b62 100%);
-webkit-border-image-slice: 2;
border-image-slice: 2;
}
<div>
</div>
The following may be helpful supplemental information. The accepted answer is still true for Safari 11 (as of posting), but for the record, I have also found that with, border-image:url, Safari(v11) will accept the shorthand border, with transparent, if you list the -webkit- vendor prefix last, like this:
div {
border:1px solid transparent;
border-image:url([some-border-image]) 1 0 1 repeat;
-webkit-border-image:url([some-border-image]) 1 0 1 repeat;
}
Since it is non-standard to list the vendor prefix last, I prefer the accepted answer as most web standards friendly.

Strange lines safari 6 gradients

I'm trying to make gradients to the block.
Code:
a {
display: inline-block;
box-sizing: border-box;
width: 330px;
height: 160px
background: -moz-linear-gradient(top, #fdfdfd 0%,#fcfcfc 100%);
background: -webkit-linear-gradient(top, #fdfdfd 0%,#fcfcfc 100%);
background: linear-gradient(to bottom, #fdfdfd 0%,#fcfcfc 100%);
}
It works fine in chrome 27, ff 22, but in safari 6 I have strange lines in the middle.
I know, that safari supports only -webkit-linear-gradient, but it works strange for me.
Also find -webkit-mask-image, but not sure, that it will help.
Fiddle
Any ideas?
Safari and older versions of Chrome have problems displaying gradients with very similar colors, I'd suggest to switch to SVG gradients. You gain IE 9 support in the process. The syntax is not very nice, unfortunately:
background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc3NiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPgo8c3RvcCBzdG9wLWNvbG9yPSIjRkRGREZEIiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjRkNGQ0ZDIiBvZmZzZXQ9IjEiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnNzYpIiAvPgo8L3N2Zz4=);
http://jsfiddle.net/82D7g/
You can use Microsoft's SVG gradient generator if you want to tweak the gradient: http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/

PIE CSS works in IE9 but not IE8

For this project, I am using Tomcat 7 and have configured it to serve htc with content type of text/x-component
<?xml version="1.0" encoding="UTF-8"?>
<web-app ...>
...
<mime-mapping>
<extension>htc</extension>
<mime-type>text/x-component</mime-type>
</mime-mapping>
</web-app>
For some reason, it works in IE9 (gradients, drop shadows, rounded corners) but not in IE8, dont see any CSS3 in effect at all. In the developer console under styles/tracxe styles, I see behavior but I don't see anything like -pie-background for example. Is that a problem?
What might be the cause, it seems wierd that it works in IE9 but not IE8. I don't suppose I need different setup or anything like that? CSS of 1 element:
#masthead {
background: #0E0E0E;
background: #0e0e0e;
background: -moz-linear-gradient(center top, #7d7d7d 0%, #0e0e0e 100%);
background: -webkit-linear-gradient(top, #7d7d7d 0%, #0e0e0e 100%);
background: -o-linear-gradient(top, #7d7d7d 0%, #0e0e0e 100%);
background: -ms-linear-gradient(top, #7d7d7d 0%, #0e0e0e 100%);
background: linear-gradient(top, #7d7d7d 0%, #0e0e0e 100%);
-pie-background: linear-gradient(top, #7d7d7d 0%, #0e0e0e 100%);
behavior: url(/owmw/web/css/PIE.htc);
height: 35px;
border: 1px solid #000000;
color: #FFFFFF;
position: relative;
text-align: center;
margin: 0px auto;
}
I am using IE10 in IE8 compatibility mode, does it matter?
I too faced the same issue and following was the reason for my problem:
I used a wrong positioning for my DIV element.
I was targeting the wrong path in behavior.
From your code, the problem seems to be in targeting the wrong path.
behavior: url(/owmw/web/css/PIE.htc);
FIX:
Instead try to refer the PIE.htc file in css folder and make it look like behavior: url(PIE.htc);
or
use behavior: url(owmw/web/css/PIE.htc);
Check out behavior property.
I might be wrong, but this solved my issue.
Even I tried using behavior: url(../owmw/web/css/PIE.htc); but not worked.
From your comments, it seems you're using X-UA-Compatible as a fix and it works only through IE10 compatibility mode.
!-- Force IE to use the latest version of its rendering engine -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
By telling IE to use the latest version of its rendering engine in your page.
Incase if your user opens in IE8 browser? This will certainly fails.
You can check this in MSDN Library.
Hope you understand.

Combining a gradient and background-image in non-Webkit browsers?

I'm trying to combine a transparent CSS gradient and a background image, and fail gracefully in browsers that don't support the gradient.
I have this CSS, which works fine in Webkit browsers, but seems to be totally ignored by non-Webkit browsers (e.g. Firefox), which display a white background:
body {
height:100%;
-webkit-font-smoothing: subpixel-antialiased;
padding-top: 2%;
padding-bottom: 2%;
background: -webkit-gradient(linear, left top, right top,
from(rgba(0,0,0,0.4)), to(rgba(0,0,0,0.4)),
color-stop(0.03, rgba(0,0,0,0.2)),
color-stop(0.06, transparent),
color-stop(0.94, transparent),
color-stop(0.97, rgba(0,0,0,0.2))),
url(../img/myimg.jpg) repeat;
}
However, if I set background to:
background: url(../img/myimg.jpg) repeat;
instead, it works fine in Firefox. Shouldn't Firefox just ignore the -webkit-gradient part of the rule? How can I make this Firefox-friendly?
You should try to use the standard, unprefixed linear gradient syntax - this is now quite widely supported: IE10, chrome 26 (current is 27), firefox 16 (current is 20), opera 12.1 (the latest version). To support mobile browsers you'll additionally need the webkit-prefixed version.
Using your example gradient, the standard syntax is...
background: linear-gradient(to left,
rgba(0,0,0,0.4), rgba(0,0,0,0.0) 6%, rgba(0,0,0,0.0) 94%, rgba(0,0,0,0.4));
You can see this in a jsfiddle example.
If the value is invalid, firefox won't read anything after; here your background is ignored as -webkit is an unknown property value for firefox, so in your example, -webkit is an unknown value for firefox at first so it will skip that and move to next property in that class..Say for example
background: asadsa, url('http://images.google.co.in/intl/en_ALL/images/logos/images_logo_lg.gif');
/* asadsa is invalid here, so firefox will skip to next property */
Demo
CSS
div {
background: asadsa, url('http://images.google.co.in/intl/en_ALL/images/logos/images_logo_lg.gif');
---^---
/* Invalid Value For Property background */
height: 200px;
width: 300px;
border: 1px solid #f00;
}
Firefox doesn't just ignore "that part" of the rule. Firefox ignores the whole rule when it doesn't recognize a part of it.
This means you can specify several rules and Firefox will pick only those that it understands:
body {
height:100%;
-webkit-font-smoothing: subpixel-antialiased;
padding-top: 2%;
padding-bottom: 2%;
background: url(http://lorempixel.com/400/200/) repeat;
background: -webkit-gradient(linear, left top, right top,
from(rgba(0,0,0,0.4)), to(rgba(0,0,0,0.4)),
color-stop(0.03, rgba(0,0,0,0.2)),
color-stop(0.06, transparent),
color-stop(0.94, transparent),
color-stop(0.97, rgba(0,0,0,0.2))),
url(http://lorempixel.com/400/200/) repeat;
}
fiddle:
http://jsfiddle.net/yb5AE/
Firefox understands the first background rule, but not the second. Therefore the first one is used.
Webkit understands both and therefore the second one overwrites the first one, because it is declared "later", and so the second one is used.

CSS Gradients & Shadows on IE

I have been pulling my hair out trying to get the shadows to work on IE... They are working fine in chrome, safari, and firefox! Does someone have experience with this subject? I put the site up so you can see the full code and output.
Test Site
I am using lesscss, so maybe that is my issue? I hope not!!! I am also using the IE CSS3 Fix, ie-css3.htcThe code I am using is as follows... I was attempting to do this without the htc, but with no luck.. at least the htc got my background gradients to work in IE... before it was showing only blue-black, the default Microsoft background gradient colors.
predefine.less
.RUNgradient(#COLOR: #CLR1){
#CLRL:lighten(#COLOR, 10%);
#CLRD:darken(#COLOR, 10%);
background-color: #CLRL;
background-repeat:repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#CLRL), to(#CLRD));
background-image: -moz-linear-gradient(top, #CLRL, #CLRD);
background-image: -ms-linear-gradient(top, #CLRL, #CLRD);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #CLRL), color-stop(100%, #CLRD));
background-image: -webkit-linear-gradient(top, #CLRL, #CLRD);
background-image: -o-linear-gradient(top, #CLRL, #CLRD);
background-image: linear-gradient(top, #CLRL, #CLRD);
behavior: url(css/ie-css3.htc);
}
styles.less
div.wrapper{
width:500px;
margin:25px auto;
padding: 10px 25px;
text-align:center;
.RUNgradient;
.RUNshadow;
p{
font:24px #HEADERFONT;
color:#ffffff;
.RUNtextshadow;
}
}
Filters are the answer! Almost...
For the gradient,
filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="#CLRL~", EndColorStr="#CLRD~")";
And for the shadows,
filter: ~"progid:DXImageTransform.Microsoft.shadow(color="#SCLR~", Direction="#DIR~", Strength="#STR~")";
Only thing left is changing the direction in a way to have the shadow visible all around the element, not just to one side.
Solution
After researching Microsoft Filters, I figured out how to get a similar effect. The corners are a bit rough for my liking, but this is MUCH closer than before!
This is the shadow filer I used...
.RUNshadow(#BLURRING:10px){
#SCLR:#111111;
#DIR:225;
#DIR2:45;
#DIR3:135;
#DIR4:315;
#STR:4;
box-shadow: 0px 1px #BLURRING #111111;
-moz-box-shadow: 0px 1px #BLURRING #111111;
-webkit-box-shadow: 0px 1px #BLURRING #111111;
filter: ~"progid:DXImageTransform.Microsoft.shadow(color="#SCLR~", Direction="#DIR2~", Strength="#STR~")
progid:DXImageTransform.Microsoft.shadow(color="#SCLR~", Direction="#DIR~", Strength="#STR~")
progid:DXImageTransform.Microsoft.shadow(color="#SCLR~", Direction="#DIR3~", Strength="#STR~")
progid:DXImageTransform.Microsoft.shadow(color="#SCLR~", Direction="#DIR4~", Strength="#STR~")";
}
I have been pulling my hair out trying to get the shadows to work on IE... They are working fine in chrome, safari, and firefox! Does someone have experience with this subject?"
Yeah, that's normal. Most people don't bother. Remember to ask yourself, Do Websites Need To Look Exactly The Same In Every Browser?
If you really want this, you'll have to use the gradient filter for IE. Add the following style to your RUNgradient class:
filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="#CLRL~", EndColorStr="#CLRD~")";
For both of them you can use IE filters.
You can use the gradient filter for gradients and the Shadow filter for shadows. The gradient filter works very well, the shadow filter looks really bad.
You can read in the documentation of the filters how to use them. But if you want to do it automatic you need see how CSS3 please is dealing with the filters and convert gradients to IE filter gradients.
You need to add these lines to the style tag for making this to work in IE,
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#444444', endColorstr='#222222'); /* IE6 & IE7 */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#444444', endColorstr='#222222')"; /* IE8 */
Sample code Snippet:
.ms-viewheadertr ms-vhltr
{
background: #222 ;/when gradients doesn't fill it fills the color/
background: -webkit-linear-gradient(#444, #222);/* For Safari 5.1 to 6.0 */
background: -moz-linear-gradient(#444, #222);/* For Firefox 3.6 to 15 */
background: -o-linear-gradient(#444, #222);/* For Opera 11.1 to 12.0 */
background: linear-gradient(#444, #222);/* Standard syntax */
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#444444', endColorstr='#222222'); /* IE6 & IE7 */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#444444', endColorstr='#222222')"; /* IE8 */
}

Resources