kleinejan / titatoggle

Pure css toggle buttons based on the bootstrap checkbox pattern
http://kleinejan.github.io/titatoggle/
MIT License
187 stars 109 forks source link

Performance issue with Cordova #4

Closed julesmoretti closed 9 years ago

julesmoretti commented 9 years ago

Hi there. Somehow the responsiveness of these are impacted when used on a cordova project with iOS. It seems that there is an initial delay before hand.

I am using this one in my case:

  <div class="checkbox checkbox-slider--c checkbox-slider-info">
    <label>
      <input type="checkbox"><span>something</span>
    </label>
  </div>

When running grunt serve and played through chrome there is no performance issues. When running cordova emulate ios or cordova build ios and loading it on iPhone through xCode that is when there is a 0.5second delay.

Would you have any idea to why?

Thank you! and otherwise very cool stuff.

kleinejan commented 9 years ago

What could be the problem is the CSS animation. I don't think it's a big memory/gpu hog, but you can alway's try to strip the CSS transition and see if this is the performance problem you 're experiencing.

Default there is a delay to .3 seconds. (animation: splashIn ease-in .3s normal;) lowering this number will effect the delay, and some of the eye-candy. Other then that you can just lower it.

Curious if this solves your delay problem.

julesmoretti commented 9 years ago

Thank you @kleinejan unfortunately that did not work. I did a quick search on it and it seems that iOS handling is a bit more tricky then we would expect. Do you think that it could be any of the points mentioned in this article?

http://www.mikedellanoce.com/2012/09/10-tips-for-getting-that-native-ios.html

julesmoretti commented 9 years ago

The issue has nothing to do with your project. The answer is to use this: https://github.com/ftlabs/fastclick/

And incorporate the following fix discussed here: https://github.com/ftlabs/fastclick/issues/351

which is to use display: block on the span along with pointer-events: none

tested and worked like a charm for cordova ios.