CSS Border Image Gradient Not Working in Safari 10 - css

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.

Related

How to make background-image with linear-gradient work on IE 11?

Any idea how I can make background-image with linear-gradient to work on IE 11?
The following code works fine on IE 10 but doesn't work on IE 11.
background-image: url(IMAGE), -ms-linear-gradient(top, #ffffff, #BEE38F);
I can make linear-gradient to work on IE 6-9, 11 using the following filter but background image is not displayed in this case.
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#BEE38F',GradientType=0 )
I'm open to an ideas.
Update: Here's the code I currently have.
background-image: url(IMAGE), -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#BEE38F));
background-image: url(IMAGE), -webkit-linear-gradient(top, #ffffff, #BEE38F);
background-image: url(IMAGE), -moz-linear-gradient(top, #ffffff, #BEE38F);
background-image: url(IMAGE), -ms-linear-gradient(top, #ffffff, #BEE38F);
background-image: url(IMAGE), -o-linear-gradient(top, #ffffff, #BEE38F);
background-image: url(IMAGE), linear-gradient(to bottom, #ffffff, #BEE38F);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#BEE38F',GradientType=0 );
linear-gradient() is supported unprefixed on IE10 RTM and later, including IE11. You never need the -ms- prefix — only the pre-release versions of IE10 required it and those versions don't even run anymore. You're just wasting space by including the prefix in your CSS.
Note that the directional syntax for linear-gradient() is different; what was originally top is now represented as to bottom instead (see this blog post, this question, and the spec for details):
background-image: url(IMAGE), linear-gradient(to bottom, #ffffff, #BEE38F);
Maddening, isn't it?
Prior to IE 11,
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cccccc');
For IE 11:
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #CCCCCC 100%);
That's right folks, we not only have to worry about supporting older IEs, apparently we'll now have to deal with NEWER IE quirks as well...
These are all super great solutions if you are overlaying a linear gradient directly on text. But if you want to display it overtop an image it doesn't work in IE.. don't ask me why but it doesn't.
I scowered many resources and finally came across this diddy
#media (-ms-high-contrast: none), (-ms-high-contrast: active) {
.yourTargetClass:before {
content: "";
position: absolute;
height: 100%;
width: 100%;
background-image: linear-gradient(-221deg, rgba(205,234,255,0.41), rgba(227,253,255,0.82)); /* THIS IS WHAT EVER OVERLAY COLOUR YOU WANT */ }
opacity:0.55;
}
}
I wrapped this within an IE selector for 10+. You need to include the opacity as that will help blend the gradient overlay with the content.
Hope this helps someone!
I noticed that for IE 11 the liniear-gradient works fine on itself. Unfortunately it doesn't work well as an overlay if you want to use a bacground image as well.
The only way that I was able to make it work for me was to switch to using rgba instead of hex colors and percentage. Also it only worked when I put the liniear-gradient first and not vice versa.
background-image:
linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73)),
url('images/background.jpg');
I faced the same issue and in addition to doing the filter and linear-gradient, I also had to add the width in my CSS class, once I set the width, I could see my custom styles with background gradient.

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/

Why is Chrome bailing on this gradient setting?

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/

Firefox li href CSS selector

I've styled some list items (li) using CSS. The style's applied to the a selector within the li. It works great in Chrome, IE and Safari but not Firefox:
<ul class="organisations">
<li class="community-care"><a href="http://adviceglos.org.uk/organisation-type/community-care/" title="View all posts in Community Care" >Community Care</a></li>
</ul>
Here's the CSS:
ul.organisations li.community-care a {
background-image: -webkit-gradient(linear,center top,center bottom,color-stop(0%,#5CBCC4),color-stop(100%,#38939B));
background-image: -webkit-linear-gradient(#5CBCC4 0,#38939B 100%);
background-image: -moz-linear-gradient(#5CBCC4 0,#38939B 100%);
background-image: -o-linear-gradient(#5CBCC4 0,#38939B 100%);
background-image: -ms-linear-gradient(#5CBCC4 0,#38939B 100%);
background-image: linear-gradient(#5CBCC4 0,#38939B 100%);
background-color: #5CBCC4;
border: 1px solid #318188;
border-bottom-color: #245E63;
}
You have a syntax error in your stylesheet. In particular, line 529 is:
background-image: -o-linear-gradient((#eeeeee 0,#ccc 100%) !important;
Note that you have one more open paren than close paren. In a spec-compliant CSS parser (which excludes WebKit), this causes the UA to treat everything up to the matching close paren as part of the background-image value. In this case, that's all the rest of the stylesheet, so all the rules after this point are ignored.
Further note that Firefox did report this problem in its error console, which is how I found it...
Apply -moz for firefox like this:
background: -moz-linear-gradient(#BF698C 0px, #93506D 100%) repeat scroll 0 0 transparent;

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