0

I refer this code CSS Border Image Gradient Not Working in Safari 10 But I want to use two color combination for the bottom border. For that, I modified it as below.

Below code working in Mac- Safari:: 9.1.2, 10.0 Mac- Chrome:: 60, Windows- Mozilla 56. Windows- Edge.

.bluegray-line {
    border-top: 0px;
    border-right: 0px;
    border-left: 0px;
    border-bottom: 1px;
    border-bottom-style: solid;
    line-height: 1;
    padding-bottom: 7px;
    border-image: linear-gradient(to right, #00a9ce 38%, rgba(147, 148, 148, 0.39) 10%) 5;
    -moz-border-image: -moz-linear-gradient(to right, #00a9ce 38%, rgba(147, 148, 148, 0.39) 10%) 5;
    -webkit-border-image: -webkit-linear-gradient(to right, #00a9ce 38%, rgba(147, 148, 148, 0.39) 10%) 5;
    -o-border-image: -o-linear-gradient(to right, #00a9ce 38%, rgba(147, 148, 148, 0.39) 10%) 5;
    -ms-border-image: -ms-linear-gradient(to right, #00a9ce 38%, rgba(147, 148, 148, 0.39) 10%) 5;
}

But it's not working properly in Safari 5.1.7

.bluegray-bottom {
    border-top: 0px;
    border-right: 0px;
    border-left: 0px;
    border-bottom: 1px;
    border-bottom-style: solid;
    line-height: 1;
    padding-bottom: 7px;
    border-image: linear-gradient(to right, #002159 25%, #939494 15%) 5;
    -moz-border-image: -moz-linear-gradient(to right, #002159 25%, #939494 15%) 5;
    -webkit-border-image: -webkit-linear-gradient(to right, #002159 25%, #939494 15%) 5;
    -o-border-image: -o-linear-gradient(to right, #002159 25%, #939494 15%) 5;
    -ms-border-image: -ms-linear-gradient(to right, #002159 25%, #939494 15%) 5;
}
<div class="bluegray-bottom">LOG IN</div>

When i write ("right") instead of ("to right"). that time it works properly for Safari 5.1.7, But it does not work for another browser.

Suraj Sakhare
  • 363
  • 1
  • 4
  • 12
  • Why are you trying to support such an old version? – Mr Lister Sep 04 '17 at 19:23
  • Anyway, the best way to write this style is to put `border-image` last, below all the prefixed ones. Perhaps then it will work in other browsers if you tailor the -webkit- one to Safari 5.1. – Mr Lister Sep 04 '17 at 19:25
  • Mr Lister, It's a Client requirement. As you suggest to put border-image last, I tried that too but it's not working for me. – Suraj Sakhare Sep 06 '17 at 07:33

1 Answers1

1

Safari 5 has a bug where using border-image overrides the element's background. That is, rather than using the element's background-color property, it uses the border-image itself, in effect painting over all the content.
Compare this snippet between Safari 5 and other browsers.

body {font-size:16px}

.bluegray-bottom {
    border:0 none;
    border-bottom: 1px solid transparent;
    line-height: 1;
    padding-bottom: 7px;
    background-color:white;
    -webkit-border-image: -webkit-linear-gradient(left, #002159 25%, #939494 15%) 5;
    -moz-border-image: -moz-linear-gradient(to right, #002159 25%, #939494 15%) 5;
    -o-border-image: -o-linear-gradient(to right, #002159 25%, #939494 15%) 5;
    border-image: linear-gradient(to right, #002159 25%, #939494 15%) 5;
}
<div class="bluegray-bottom">LOG IN</div>

(Note that I don't have a Mac or an iPad here, so I can't test other versions of Safari. I assume the bug has been corrected in the meantime though.)
(Also note that I removed the -ms-prefixed property, because it doesn't exist.)

One workaround is to use the background property rather than the border-color. You can position the background image anywhere you want in the element, so if you know the font size, you can calculate exactly where the background needs to be.

body {font-size:16px}

.bluegray-bottom {
    border:0 none;
    border-bottom: 1px solid transparent;
    line-height: 1;
    padding-bottom: 7px;
    background: white -webkit-linear-gradient(left, #002159 25%, #939494 15%) 0 23px no-repeat;
    background: white -moz-linear-gradient(to right, #002159 25%, #939494 15%) 0 23px no-repeat;
    background: white -o-linear-gradient(to right, #002159 25%, #939494 15%) 0 23px no-repeat;
    background: white linear-gradient(to right, #002159 25%, #939494 15%) 5;
}
<div class="bluegray-bottom">LOG IN</div>

By the way, using Safari 5 is a bad idea now. This site says it has at least 121 security issues. There are better and safer browsers.

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
  • Hi Mr lister, Thanks for your answer it's working for me. though it is not border-image. :) – Suraj Sakhare Sep 07 '17 at 10:03
  • As you said, (Also note that I removed the -ms-prefixed property, because it doesn't exist) basically it use for Internet Explorer Browser please review this answer https://stackoverflow.com/a/18083113/4485839 – Suraj Sakhare Sep 07 '17 at 10:43
  • Yes, but the page for [linear-gradient](https://msdn.microsoft.com/en-us/library/jj152126%28v=vs.85%29.aspx) on MSDN says _Do not use the Microsoft vendor prefix ("-ms-")_ explicitly. The prefixes are only to be used for properties and functions that start with -ms-, as specified on [this list](https://msdn.microsoft.com/en-us/library/hh869403%28v=vs.85%29.aspx?f=255&MSPPError=-2147217396#properties). So no `-ms-border-image` or `-ms-linear-gradient`. – Mr Lister Sep 07 '17 at 11:20