5

The following CSS doesn`t function on Safari (tested on iPad iOS):

.map-left-navi {
    background: #ffffff;
    background: -moz-linear-gradient(left, #ffffff 35%, transparent 100%);
    background: -webkit-linear-gradient(left, #ffffff 35%,transparent 100%);
    background: linear-gradient(to right, #ffffff 35%,transparent 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='transparent',GradientType=1 );
}

Any idea on a workaround to keep the transparency?

Edit - Solution:

Use rgba CSS color values:

.map-left-navi {
    background: #ffffff;
    background: -moz-linear-gradient(left, rgba(255,255,255, 0.35), rgba(255,255,255, 0));
    background: -webkit-linear-gradient(left, rgba(255,255,255, 0.35), rgba(255,255,255, 0));
    background: linear-gradient(to right, rgba(255,255,255, 0.35), rgba(255,255,255, 0));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='transparent',GradientType=1 );
}

1 Answer 1

14

Use rgba instead of transparent.

.map-left-navi {
    background: #ffffff;
    background: -moz-linear-gradient(left, rgba(255,255,255, 0.35), rgba(255,255,255, 0));
    background: -webkit-linear-gradient(left, rgba(255,255,255, 0.35), rgba(255,255,255, 0));
    background: linear-gradient(to right, rgba(255,255,255, 0.35), rgba(255,255,255, 0));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='transparent',GradientType=1 );
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.