Xcode 9 Swift 4 Playgrounds UIGestureRecognizer not working

Question

Recently, I've started working on my WWDC 2018 submission. In anticipation, I started my project in a swift playgrounds file (Apple usually doesn't accept app submissions). Around two months ago, I updated Xcode to version 9.2 (9C40b). After doing so, I realized that my gesture recognizers weren't working on my live view. Everything was rendered and displayed perfectly on the live view assistant window, but my gesture recognizers failed to respond at all. Has anyone had any problems with a similar issue, and has anyone been able to use swift playgrounds with Swift 4 in Xcode 9 (I've attached my code below for reference)?

//: A UIKit based Playground for presenting user interface

import UIKit
import PlaygroundSupport

class HomeViewController : UIViewController, UIGestureRecognizerDelegate {
    let cardViewOne = UIView()
    let cardButtonOne = UIButton()

    let cardViewTwo = UIView()
    let cardButtonTwo = UIButton()

    let cardViewThree = UIView()
    let cardButtonThree = UIButton()

    let cardViewControllerTitleLabel = UILabel()

    override func loadView() {
        let view = UIView()
        view.backgroundColor = .white

        //Card One

        cardViewOne.frame = CGRect(x: 0, y: 218, width: 375, height: 480)
        cardViewOne.backgroundColor = #colorLiteral(red: 1, green: 0.1058823529, blue: 0.3607843137, alpha: 1)
        cardButtonOne.frame = CGRect(x: 0, y: 0, width: 375, height: 47)
        cardButtonOne.backgroundColor = UIColor(red:0.90, green:0.10, blue:0.31, alpha:0.0)
        cardButtonOne.setTitle("About", for: .normal)
        cardButtonOne.titleLabel?.font = UIFont(name: "Avenir-Black", size: 18)

        cardViewOne.layer.shadowColor = UIColor.black.cgColor
        cardViewOne.layer.shadowOpacity = 0.25
        cardViewOne.layer.shadowOffset = CGSize.zero
        cardViewOne.layer.shadowRadius = 40
        cardViewOne.layer.shadowPath = UIBezierPath(rect: cardViewOne.bounds).cgPath

        //Card Two

        cardViewTwo.frame = CGRect(x: 0, y: 164, width: 375, height: 480)
        cardViewTwo.backgroundColor = #colorLiteral(red: 0.8965349741, green: 0.0931719053, blue: 0.3287236417, alpha: 1)
        cardButtonTwo.frame = CGRect(x: 0, y: 0, width: 375, height: 47)
        cardButtonTwo.backgroundColor = UIColor(red:0.90, green:0.10, blue:0.31, alpha:0.0)
        cardButtonTwo.setTitle("Mix", for: .normal)
        cardButtonTwo.titleLabel?.font = UIFont(name: "Avenir-Black", size: 18)

        cardViewTwo.layer.shadowColor = UIColor.black.cgColor
        cardViewTwo.layer.shadowOpacity = 0.25
        cardViewTwo.layer.shadowOffset = CGSize.zero
        cardViewTwo.layer.shadowRadius = 40
        cardViewTwo.layer.shadowPath = UIBezierPath(rect: cardViewTwo.bounds).cgPath


        //Card Three

        cardViewThree.frame = CGRect(x: 0, y: 109, width: 375, height: 480)
        cardViewThree.backgroundColor = #colorLiteral(red: 0.8446810233, green: 0.08778301191, blue: 0.3097108647, alpha: 1)
        cardButtonThree.frame = CGRect(x: 0, y: 0, width: 375, height: 47)
        cardButtonThree.backgroundColor = UIColor(red:0.90, green:0.10, blue:0.31, alpha:0.0)
        cardButtonThree.setTitle("Experiment", for: .normal)
        cardButtonThree.titleLabel?.font = UIFont(name: "Avenir-Black", size: 18)

        cardViewThree.layer.shadowColor = UIColor.black.cgColor
        cardViewThree.layer.shadowOpacity = 0.25
        cardViewThree.layer.shadowOffset = CGSize.zero
        cardViewThree.layer.shadowRadius = 40
        cardViewThree.layer.shadowPath = UIBezierPath(rect: cardViewThree.bounds).cgPath

        cardViewControllerTitleLabel.text = "Vibe"
        cardViewControllerTitleLabel.frame = CGRect(x: 158, y: 20, width: 81, height: 34)
        cardViewControllerTitleLabel.font = UIFont(name: "Avenir-Black", size: 32)
        cardViewControllerTitleLabel.textColor = #colorLiteral(red: 1, green: 0.1215686275, blue: 0.3529411765, alpha: 1)

        //ViewController Title

        cardViewOne.layer.zPosition = 3
        cardViewTwo.layer.zPosition = 2

        //z-index adjustment

        view.addSubview(cardViewOne)
        view.addSubview(cardViewTwo)
        view.addSubview(cardViewThree)
        cardViewOne.addSubview(cardButtonOne)
        cardViewTwo.addSubview(cardButtonTwo)
        cardViewThree.addSubview(cardButtonThree)
        view.addSubview(cardViewControllerTitleLabel)
        self.view = view
    }

    override func viewDidLoad() {
        let tap = UITapGestureRecognizer(target: self, action: #selector(handleTap))
        tap.delegate = self
        cardButtonTwo.addGestureRecognizer(tap)

        print("Gesture recognizer added")

        self.navigationController?.isNavigationBarHidden = true
    }

    @objc func handleTap(sender: UITapGestureRecognizer? = nil) {
        let detail = TestViewController()
        navigationController?.pushViewController(detail, animated: true)
    }
}

class TestViewController: UIViewController {

}

let root = HomeViewController()
let nav = UINavigationController(rootViewController: root)
// Present the view controller in the Live View window
PlaygroundPage.current.liveView = nav

Answer 1

You have used incorrect values of height for your card views.
Changing height value to a lesser value of 47 worked:

cardViewOne.frame = CGRect(x: 0, y: 218, width: 375, height: 47)
cardViewTwo.frame = CGRect(x: 0, y: 164, width: 375, height: 47)
cardViewThree.frame = CGRect(x: 0, y: 109, width: 375, height: 47)

Also, because cardButtonTwo is a UIButton , you don't need to use UITapGestureRecognizer . You can simply add target for touchUpInside event.

override func viewDidLoad() {
        cardButtonTwo.addTarget(self, action: #selector(HomeViewController.handleTap(sender:)), for: .touchUpInside)
        self.navigationController?.isNavigationBarHidden = true
    }