Framework7: Material Theme on IOS bugs: ripple, checkbox, status bar

[hesrun]

This is a (multiple allowed):

• [x] bug
• [ ] enhancement
• [ ] feature-discussion (RFC)

• Framework7 Version: 1.5.3
• Platform and Target: CORDOVA, IOS.

screenshot

We built the app for ios with material theme. And we have some problem:

1. ripple wave is not hiding after tap on the tab and they overlap each other.
2. checkbox only works on a double tap
3. I do not understand how the status bar work? The remaining space between tabs.

[valnub]

Hi, can you post some screenshots, video or live demo to showcase the issues? Thanks

[navi8602]

This video problem https://monosnap.com/file/YqcEyDyo7rLBYrUJJlRfe5P9PajimF

[valnub]

@navi8602 Link returns a 404

[navi8602]

@valnub Fix link

[navi8602]

https://monosnap.com/file/YqcEyDyo7rLBYrUJJlRfe5P9PajimF

[valnub]

I don't see these problems in the official demo http://framework7.io/kitchen-sink-ios/

So, the issue must be in your code. Can you provide it? Best is to use Codepen http://codepen.io/

[hesrun]

@valnub On the WEB there are no such problems.
Such problems have to build applications running IOS device.

[navi8602]

@valnub help please

[valnub]

Sorry, I don't know how to help without seeing the code

[navi8602]

@valnub In this video, there is a code and configuration that we use when you hold for two seconds and release, it works. With the rapid clicking does not work

https://monosnap.com/file/S9MpWNU6olD7YNIcccyom2Nlgmi3k0

[navi8602]

@valnub If you do build a android then everything works wonderfully. For iOS experience difficulties

[valnub]

Are you using React or Framework7-react?
It's very hard to debug and see what's going on just based on the video.

[valnub]

And why are you setting checked=true in the click event?

Also, did you try to disable FastClick and MaterialRipple?

[hesrun]

@valnub We use meteor js with framevork7.
Problem with active-state class, when i do fast tap on checkbox, or radio, or button, active-state class added to element, but after tap don't removed and ripple element note removed... If we make long tap, is it work. But we use default setting App...

[valnub]

It looks like your problem is rather related to your custom project architecture than being a F7 bug.

This Github page is only for reporting bugs in F7.

As far as I know there is no official support for Meteor in F7 anyways, so you're using it at own risk. F7 is best used with Vue.js, jQuery or Dom7/Template7.

If you seek for help with your code please ask on one of the following platforms.

• Official Framework7 forum
• Stackoverflow

I'm sure that someone will be able to help you there. Make sure to post your full runnable code alongside your videos.

Good luck!

[navi8602]

@valnub We solved the problem with our probable! The cases were in the mobile-experience
In order for it to work fast click and rip it in the meteor you need to remove mobile-experience Package from the meteor

[MiguelQueiroz]

I have seen this issue in a pure F7 v2 project. Doing that fast click, on the close of the nav bar with modals, when clicking fast. But i dont have a sample to show. But i have seen it..