CODEWITHSUNDEEP
csssafaricross-browserlinear-gradientssafari-windows
Suraj Sakhare
Suraj Sakhare

Reputation: 363

CSS Border Image Gradient Not Working in Safari 5.1.7

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.

Upvotes: 0

Views: 693

Answers (1)

Mr Lister
Mr Lister

Reputation: 46589

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.

Upvotes: 1

Related Questions