iOS 8.1.2 styled checkboxes with box-sizing: border-box;

It's very difficult to tap this styled checkbox when FastClick is enabled. I tried this with iPhone 6 and iOS 8.1.2. There's some issues with box-sizing: border-box; and FastClick, because without box-sizing this demo works perfectly.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimal-ui">
    <title>Checkbox</title>
    <script src="http://ftlabs.github.io/fastclick/lib/fastclick.js"></script>
    <style>
        body {
            margin: 30px;
            -webkit-user-select: none !important;
            -moz-user-select: none !important;
            -ms-user-select: none !important;
            -o-user-select: none !important;
            user-select: none !important;
        }

        .left {
            float: left;
            margin-right: 10px;
        }

        .no_pointer_events {
            pointer-events: none;
        }

        .options {
            display: inline-block;
        }

        .options label {
            cursor: pointer;
            display: block;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }

        .options label > * {
            pointer-events: none;
        }

        .options .option_cell label {
            background: #FBFBFB;
            background: linear-gradient(to bottom, rgba(255,255,255,.9) 0%, rgb(241,241,241) 100%);
        }

        .options .checked {
            pointer-events: none;
            margin: 1px;
            background: #ffffff;
            border: 1px solid #ffffff;
            box-sizing: border-box;
            box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), inset 0 0 0 1px rgba(0, 0, 0, 0.15);
            display: block;
            width: 20px;
            height: 20px !important;
            min-height: 20px !important;
            line-height: 20px !important;
        }

        .options input:checked + label span.checked {
            background: #0096d4 !important;
            box-shadow: inset 0 0 0 1px #0377a8, 0 0 0 1px rgba(0, 0, 0, 0.15);
        }

        .options input {
            position: absolute !important;
            visibility: hidden;
            -webkit-appearance: none;
            width: 23px;
            height: 23px;
            padding: 0;
        }
    </style>
</head>
<body>
<div class="terms">
    <div class="left">
        <div class="options">
            <input type="checkbox" tabindex="18" id="terms" name="terms" value="1">
            <label onclick="" for="terms">
                <span class="checked no_pointer_events">&nbsp;</span>
            </label>
        </div>
    </div>
    <div>
        <label onclick="" for="terms">
            Accept with <a rel="nofollow" href="https://www.google.com">Google</a>
        </label>
        <div class="clear"></div>
    </div>
</div>
</body>
</html>

ftlabs / fastclick

iOS 8.1.2 styled checkboxes with box-sizing: border-box; #349