Menu
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 );
}
975
Safari supports two types of CSS gradients: linear and radial.
To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.
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 );
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
