Unwanted Invisible detection area around UIButton when Highlighted

Question

I am creating a "yes" and "no" UIButton in a universal device app in my viewDidLoad, like so:

   let yesUnpressedTexture = UIImage(contentsOfFile:NSBundle.mainBundle().resourcePath!.stringByAppendingPathComponent("yesButtonUnpressed.png"))!
    let yesPressedTexture = UIImage(contentsOfFile:NSBundle.mainBundle().resourcePath!.stringByAppendingPathComponent("yesButtonPressed.png"))!
    let buttonWidth = yesUnpressedTexture.size.width
    var yesButton = UIButton.buttonWithType(UIButtonType.Custom) as! UIButton
    yesButton.setImage(yesUnpressedTexture, forState: UIControlState.Normal)
    yesButton.setImage(yesPressedTexture, forState: UIControlState.Highlighted)
    yesButton.frame = CGRect(x: device.x/2 - buttonWidth * worldScale - worldScale * 40, y:  device.y/2 - worldScale * 50, width: buttonWidth * worldScale, height: worldScale * 200)
    yesButton.addTarget(self, action: "deleteProgress:", forControlEvents: UIControlEvents.TouchUpInside)
    self.deleteView.addSubview(yesButton)

    let noUnpressedTexture = UIImage(contentsOfFile:NSBundle.mainBundle().resourcePath!.stringByAppendingPathComponent("noButtonUnpressed.png"))!
    let noPressedTexture = UIImage(contentsOfFile:NSBundle.mainBundle().resourcePath!.stringByAppendingPathComponent("noButtonPressed.png"))!
    var noButton = UIButton.buttonWithType(UIButtonType.Custom) as! UIButton
    noButton.frame = CGRect(x: device.x/2 + worldScale * 40, y:  device.y/2 - worldScale * 50, width: buttonWidth * worldScale, height: worldScale * 200)
    noButton.setImage(noUnpressedTexture, forState: UIControlState.Normal)
    noButton.setImage(noPressedTexture, forState: UIControlState.Highlighted)
    noButton.addTarget(self, action: "cancelDelete:", forControlEvents: UIControlEvents.TouchUpInside)
    self.deleteView.addSubview(noButton)

They load and work correctly when testing on my iPad, however something strange happens when I test on any iPhone simulator. If you move your finger off of either button to cancel the touch, you have to move it significantly away from the button to do so. The respective button stays highlighted until the users finger is outside of the highlighted box I have shown in the photo.

Anyone know how to fix this?

I have tried setting the frame by using CGRectMake but there is no change.

Answer 1

This is actually a feature of the OS and how touch events work. When you touch a UIControl (a UIButton in your case), the OS starts tracking your touch and movements and there's a predefined bounding rect around your control. Only after you move your finger outside this bound, the touch is considered to have exited the control - this is when the control loses it's focus (highlight) and also TouchDragExit and TouchDragOutside events are triggered.

If you want to change this, you can customize the tracking behavior by creating a UIButton subclass and overriding the continueTrackingWithTouch(_:withEvent:) method so you can end the tracking based on your own logic.