CSS Gradient Not Working on iOS

CSS gradient not working on iOS

Do give this a check in iOS but it ought to work:

background: #ffad26; /* Old browsers */
background: -moz-linear-gradient(top, #ffad26 0%, #fea026 50%, #ff8b00 51%, #ff7701 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffad26), color-stop(50%,#fea026), color-stop(51%,#ff8b00), color-stop(100%,#ff7701)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffad26 0%,#fea026 50%,#ff8b00 51%,#ff7701 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffad26 0%,#fea026 50%,#ff8b00 51%,#ff7701 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffad26 0%,#fea026 50%,#ff8b00 51%,#ff7701 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffad26 0%,#fea026 50%,#ff8b00 51%,#ff7701 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffad26', endColorstr='#ff7701',GradientType=0 ); /* IE6-9 */

I'd also recommend looking into a pre-processor like SASS which will generate a lot of these things for you.

Alternative 1

As an alternative, you could try using an inset box shadow. It's not exact, and it has it's limitations but it's just an option :)

background-color:#FF8B00;
-webkit-box-shadow: inset 0px 100px 0px 0px rgba(255, 255, 255, 0.5);
box-shadow: inset 0px 100px 0px 0px rgba(255, 255, 255, 0.5);

Alternative 2

If you know the height, either use the box shadow above or just use a background image. That way you'll get cross-browser support without the mess that is a hundred prefixed CSS properties like above :)

CSS linear gradient not working on iOS when combined with image url in background property

It turned out to be issue with the background-attachment property. After I added background-attachment: scroll; for mobile screen size the problem was solved.

EDIT

A bit better solution I found somewhere (sorry can't find again the link) is:

@media only screen and (max-width: 786px){

.green-background-image {
background-image: none;
background-repeat: no-repeat;
background-attachment: inherit;
background-position: inherit;
background-size: inherit;
background-position-y: auto;
}

.green-background-image{
content:"";
background-color: RGB(6, 134, 238);
position:fixed;
top:0;
height:100vh;
left:0;
right:0;
z-index:-1;
background: linear-gradient(180deg,rgb(0, 139, 243),rgba(72,177,0,0.63)),url(background-min.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

}

CSS radial gradient not work for iPhone and Mac

Set below properties also as only radial-gradient won't work in all browsers.

background: -webkit-linear-gradient();
background: -moz-linear-gradient();
background: linear-gradient();

Use thiswebsite to generate those properties.

linear-gradient (rgba) not working in Safari on iPhone

It might work if you add -webkit and -image to your CSS:

.serv-bg {

background-image: -webkit-linear-gradient(rgba(17, 28, 36), rgba(119, 201, 212, .1)), url(/images/service-main.jpg) no-repeat center center /cover;

border-left: 10px solid white !important;

border-top: 10px solid white !important;

border-bottom: 10px solid white !important;

border-right: 5px solid white !important;

height: 70vh;

}

Linear-Gradient not working on Android device (NativeScript 8)

You can overlay the image (or any component) with a gradient layer to achieve similar results on the both platforms.

Template

  <GridLayout rows="auto, auto, auto, auto, auto">
<Image row="0" src="~/assets/images/registration.png"/>
<ContentView row="0" height="100%" class="my-gradient"/>
... Other Components
</GridLayout>

Style

  .my-gradient {
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1))
}

CSS Linear Gradient Color Darkens on Mobile iOS compared to Major Desktop Browsers

Don't use the transparent value in CSS gradients. iOS assumes that "transparent" means "black transparent," or rgba(0,0,0,0). Instead, switch it to a transparent version of the color you're using, e.g., rgba(220 170 80 / 0).

Why is the linear gradient not fully applied to ios button

Usually, viewDidLoad for view controllers or init for custom views is too early for gradient frames. Also, their frames will most likely change later on, which you need to handle.

If you are applying a gradient to a custom view, try updating its frame inside layoutSubviews() (from this great answer).

class GradientButton: UIButton {

/// update inside layoutSubviews
override func layoutSubviews() {
super.layoutSubviews()
gradientLayer.frame = bounds
}

private lazy var gradientLayer: CAGradientLayer = {
let l = CAGradientLayer()
l.frame = self.bounds
l.colors = [UIColor.systemYellow.cgColor, UIColor.systemPink.cgColor]
l.startPoint = CGPoint(x: 0, y: 1)
l.endPoint = CGPoint(x: 0, y: )
layer.insertSublayer(l, at: 0)
return l
}()
}

For a view in a view controller, try viewDidLayoutSubviews().

class ViewController: UIViewController {

@IBOutlet weak var addToCart: UIButton!
var gradientLayer: CAGradientLayer? /// keep a reference to the gradient layer so we can update its frame later

override func viewDidLoad() {
super.viewDidLoad()

/// still first make the gradient inside viewDidLoad
applyGradient(colors: [UIColor.systemYellow.cgColor, UIColor.systemPink.cgColor])
}

override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()

/// update here!
self.gradientLayer?.frame = self.addToCart.bounds
}

private func applyGradient(colors: [CGColor]) {
let gradientLayer = CAGradientLayer()
gradientLayer.colors = colors
gradientLayer.startPoint = CGPoint(x: 0, y: 1)
gradientLayer.endPoint = CGPoint(x: 0, y: 0)
gradientLayer.frame = self.addToCart.bounds
self.addToCart.layer.insertSublayer(gradientLayer, at: 0)

self.gradientLayer = gradientLayer
}
}


Related Topics



Leave a reply



Submit