UITextField seems to ignore clipsToBounds property - ios

Question

I am creating a custom search bar by subclassing the UITextField. For some reason, the search bar has a very subtle, weird white line/border around the edges. The issue only exists on my iPhone 13 Pro Max - on the simulator everything works perfectly fine.
notice the slight white border around the pill shaped search text field. Almost like it has a white background color.
I tried to battle this by setting layer.masksToBounds and clipsToBounds to true, but unfortunately that doesn't work either.
This is my code:
public class MyCustomSearchBar: UITextField {
public override init(frame: CGRect) {
super.init(frame: frame)
self.backgroundColor = Theme.GRAY800
self.borderStyle = .roundedRect
self.layer.masksToBounds = true
self.clipsToBounds = true
self.autocorrectionType = .no
self.textColor = .white
self.attributedPlaceholder = NSAttributedString(string: "Search", attributes: [.foregroundColor : Theme.GRAY400, .font: FontFamily.ProximaNova.regular.font(size: 16)])
}
}
UPDATE:
If I add a border width and color, everything looks normal again:
Question:
Why is this a problem on my iPhone but not in the simulator? Why do I manually have to set the border width and color to avoid those white "fragments"?

Answer 1

create border and corner manually, this is an example:
let myTextField = MyCustomSearchBar()
in viewDidLoad set constraints
view.addSubview(myTextField)
myTextField.heightAnchor.constraint(equalToConstant: 50).isActive = true
myTextField.widthAnchor.constraint(equalToConstant: view.frame.width - 40).isActive = true
myTextField.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
myTextField.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
}
now assign border width, border color e round corner in MyCustomSearchBar class
public class MyCustomSearchBar: UITextField {
public override init(frame: CGRect) {
super.init(frame: frame)
self.backgroundColor = .yourColor
self.borderStyle = .none
self.layer.masksToBounds = true
self.layer.cornerRadius = 16
self.clipsToBounds = true
self.layer.borderWidth = 2
self.layer.borderColor = UIColor.white.cgColor
self.autocorrectionType = .no
self.textColor = .white
self.attributedPlaceholder = NSAttributedString(string: "Search", attributes: [.foregroundColor : UIColor.lightGray, .font: UIFont.systemFont(ofSize: 16, weight: .regular)])
self.addPadding(padding: .left(20)) // this is a extra
self.translatesAutoresizingMaskIntoConstraints = false
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
to add padding spacing to your textField use my extension:
extension UITextField {
enum PaddingSpace {
case left(CGFloat)
case right(CGFloat)
case equalSpacing(CGFloat)
}
func addPadding(padding: PaddingSpace) {
self.leftViewMode = .always
self.layer.masksToBounds = true
switch padding {
case .left(let spacing):
let leftPaddingView = UIView(frame: CGRect(x: 0, y: 0, width: spacing, height: self.frame.height))
self.leftView = leftPaddingView
self.leftViewMode = .always
case .right(let spacing):
let rightPaddingView = UIView(frame: CGRect(x: 0, y: 0, width: spacing, height: self.frame.height))
self.rightView = rightPaddingView
self.rightViewMode = .always
case .equalSpacing(let spacing):
let equalPaddingView = UIView(frame: CGRect(x: 0, y: 0, width: spacing, height: self.frame.height))
// left
self.leftView = equalPaddingView
self.leftViewMode = .always
// right
self.rightView = equalPaddingView
self.rightViewMode = .always
}
}
}
This is the result: