title: CSS iOS-like radio button lags on IOS
body: <p>I've created ios like radio button, which works fine on desktop (even on IE8, thx to ie7.js), but not on IOS devices (I have tested on iPhone 4, iPhone 5s and iPad mini).</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;span class="inp-text ios-like"&gt;
      &lt;input type="checkbox" id="checkbox" name="" checked="checked"&gt;
      &lt;label for="checkbox"&gt;
          &lt;span class="button"&gt;&lt;/span&gt;
          &lt;span class="bg"&gt;&lt;/span&gt;
      &lt;/label&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>  .ios-like {
      height: 35px;
      width: 70px;
      position: relative; }
      .ios-like label {
        position: absolute;
        top: 0;
        left: 0;
        height: 35px;
        width: 70px;
        padding: 0; }
        .ios-like label .bg {
          position: absolute;
          top: 0;
          left: 0;
          height: 35px;
          width: 70px;
          transition: 0.3s all;
          border-radius: 3px;
          background: #999;
          border: 1px solid #666; }
        .ios-like label .button {
          position: absolute;
          z-index: 6;
          width: 26px;
          height: 24px;
          background: #F7F7F9;
          top: 6px;
          left: 8px;
          border-radius: 4px;
          transition: 0.3s all;
          box-shadow: 0 1px 0px 0px #666; }
          .ios-like label .button:before, .ios-like label .button:after {
            content: "";
            display: block;
            width: 10px;
            height: 1px;
            background: #fff;
            border-top: 1px solid #e6e6e6;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -5px;
            z-index: 7; }
          .ios-like label .button:before {
            margin-top: -3px; }
          .ios-like label .button:after {
            margin-top: 3px; }
        .ios-like label:before, .ios-like label:after {
          font-family: 'icons';
          speak: none;
          font-style: normal;
          font-weight: normal;
          font-variant: normal;
          text-transform: none;
          line-height: 1;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          font-size: 16px;
          font-size: 1.6rem;
          background-color: transparent;
          margin-top: -8px;
          position: absolute;
          top: 50%;
          z-index: 5;
          color: #fff; }
        .ios-like label:before {
          content: "\e616";
          right: 10px; }
        .ios-like label:after {
          content: "\e617";
          left: 10px; }
      .ios-like input[type=checkbox] {
        position: absolute;
        opacity: 0;
        filter: alpha(opacity=0);
        zoom: 1; }
        .ios-like input[type=checkbox]:checked + label .bg {
          background: #47aa42;
          border-color: #378C33; }
        .ios-like input[type=checkbox]:checked + label .button {
          left: 38px;
          box-shadow: 0 1px 0px 0px #399735; }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/dannytce/c5WSQ/" rel="nofollow">jsfiddle example</a></p>
  
  <p>It sometimes works sometimes not (basicly on first "click" it is ok, but on repeatedly touching it doesnt response).</p>
  
  <p>Any idea why? In the past on some js plugins this lagging stuff was making a transition. I've tried to turn it off, but with the same result.</p>