CODEWITHSUNDEEP
cssmobile-safari
CoreyRS
CoreyRS

Reputation: 2267

Mobile Safari Odd Border Color Issue

See this image: http://coreyyoungcorp.com/images/border.png

This only seems to happen when the div has borders but I don't know why.

This is the CSS causing the issue:

border-top:1px solid #fff;
border-bottom:1px solid #ddd;

And this is the full div CSS:

#network-menu-row {
    width:100%;
    position:relative;
    padding-top:10px;
    padding-bottom:10px;
    position:relative;
    background: #e5e5e5;
    background: -moz-linear-gradient(top, #e5e5e5 0%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e5e5), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(top, #e5e5e5 0%,#ffffff 100%);
    background: -o-linear-gradient(top, #e5e5e5 0%,#ffffff 100%);
    background: -ms-linear-gradient(top, #e5e5e5 0%,#ffffff 100%);
    background: linear-gradient(to bottom, #e5e5e5 0%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#ffffff',GradientType=0 );
    border-top:1px solid #fff;
    border-bottom:1px solid #ddd;
}

Anyone know what is causing this? It doesn't even happen all the time. Most of the time it's fine and shows the appropriate colour, but every now and again it decides to show in blue. I thought maybe using the full 6-character hex code may fix it but it didn't, nor did changing the border thickness.

It always works fine on my desktop browser.

Thanks in advance.

Upvotes: 1

Views: 1984

Answers (1)

CoreyRS
CoreyRS

Reputation: 2267

Fixed the issue. Because the link once click had been "visited", when navigating back the anchor for some reason changed the border colours. Used the following to fix it:

a:visited div {
    border:inherit;
}

Upvotes: 3

Related Questions