Why is linear gradient working well in simulator but not on real device

Question

I am using the following code to generate a linear gradient for an iOs Button

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

 override func viewDidLayoutSubviews(){
    gradientLayer.frame = self.addToCart.bounds
}
override func viewDidLoad() {
    super.viewDidLoad()
    self.applyGradient(colors: [UIColor(red: 234, green: 67, blue: 53, alpha: 0.06).cgColor, 
    UIColor(red: 234, green: 67, blue: 53, alpha: 1).cgColor])   
  
}

The gradient is working fine on simulator but not or real device Here is what I get on simulator

And here is what I get on real device

Which is totally different

Answer 1

The RGB color channel values are not valid. See the documentation for UIColor(red:green:blue:alpha:) . The RGBA values should be between 0 and 1. If you look on your console, you will likely see an error that says something like:

[Graphics] UIColor created with component values far outside the expected range. Set a breakpoint on UIColorBreakForOutOfRangeColorComponents to debug. This message will only be logged once.

You should divide your RGB values by 255:

applyGradient(colors: [
    UIColor(red: 234/255, green: 67/255, blue: 53/255, alpha: 0.06).cgColor,
    UIColor(red: 234/255, green: 67/255, blue: 53/255, alpha: 1).cgColor
])

---

FYI, if you want to add a breakpoint on UIColorBreakForOutOfRangeColorComponents , see “Pause on a Symbol Outside Your Code” in Setting Breakpoints to Pause Your Running App , eg add symbolic breakpoint:

And specify UIColorBreakForOutOfRangeColorComponents symbol:

And the debugger will stop at the offending line: