Not working on android
ben-ng opened this issue · comments
Just tested these on my android (Galaxy S3) default browser, and they don't seem to be working right. I see some flickering with the candy theme, but the other themes don't seem to work at all.
Is this a known issue?
Oh, I found out why.
According to PPK, android doesn't support the :checked pseudo-selector.
I fixed this by using a class instead and some JS -- I'm not a CSS expert. Hopefully someone will chime in with a CSS-only workaround!
Can you tell me what Android version you are running? I did find some issues with 4.0 right now.
It's weird that PPK says that Android and Opera Mini do not have support for the :checked selector, since they both do, but require some sort of work-around that triggers a reflow, in order for the pseudo-selector to be activated. They should have been marked as buggy or incomplete.
I'm using an animation-based work-around for Android. You can see it here:
https://github.com/ghinda/css-toggle-switch/blob/gh-pages/src/toggle-switch.scss#L451-L468
The problem is that Android 4.0 devices report a -webkit-min-device-pixel-ratio of 1.5, so the animation fix is not applied, even if they still require it. I'm working on a work-around for this.
Yes, this is on 4.0 stock from Samsung.
Should be fixed now. Could you take another look and let me know if it works?
I am still having this issue after the update - tried on 2 different devices (Sony Xperia Z & Nexus 7) both running stock android 4.2.
You're testing with the stock android browser and not chrome right?
Yes, this is the stock browser I'm using.
OK, I just got out my Samsung Galaxy S2 (Running Stock Android 4.1) and can confirm now that this issue is still present on android 4.1 and 4.2
@ramijarrar That's weird. And did it work before I pushed v2.0.1 today? Or is this the first time you test?
I'm using Sauce Labs for testing, but they don't offer Android 4.1 and above. Do you know any other free service that I could use to test on 4.1 and newer?
@ghinda This is the first time I am using this so I haven't run any tests on older versions. I actually just tried this on a HTC Incredible S (Running Stock 4.0) and it did work, so it does seem to be a 4.1+ specific problem.
In terms of testing on android 4.1&4.2, I have never been a big fan of emulation, as it isn't always consistent with real devices - but I would check out browserstack (I think they have a free trial).
@ramijarrar I can't seem to be able to reproduce the issue on BrowserStack. I've tested on a Motorola Razr Maxx HD with Android 4.1, Galaxy S III with 4.1 and an LG Nexus 4 with 4.2.
Of course, these are all just emulated, but it's the only way I can test right now.
We seem to be getting different results as I have just tested my project on browserstack using the same devices and it still doesn't work. So we can be sure that we are testing the same thing I have published a small test at http://css-toggle-test.meteor.com/ I have tried it on 3 real devices as well as browser stack and am still facing the same issue.
@ramijarrar Have you tested the official demos? I have more control over those so I'd prefer we test on them: http://ghinda.net/css-toggle-switch/
OK, now this is wierd - I had no trouble running your official demos on BrowserStack but when I put them on a real android device the light switches only worked when pressed precisely on the top-left corner (toggle switches worked fine)
However, when I tried again with my own project (definetely using the latest css from the dist directory) which uses the exact same code as in your site docs, I still couldn't get it to work - not on browserstack or on a real device.
@ghinda Do you have any clues as to what might be going on?
@ghinda I've just tested the official demos at http://ghinda.net/css-toggle-switch/ with the stock Android 4.1.2 browser on my Samsung Galazy S2. They all work as expected.
@ramijarrar Your demos at http://css-toggle-test.meteor.com/ do not work in the same browser.
@sompylasar Thanks a lot for the extra hand at testing!
@ramijarrar No idea really. The only thing I can think of right now is that the meteor minifier breaks something in the original CSS, but it's just a guess.
@ghinda Thanks for the help, but I tried it without meteor altogether and got the same result - I managed to get it work by using a switch toggle instead of a light switch.
@ramijarrar I'll keep an issue open for this. So you're only experiencing issues with the light switch? Can you tell me which devices and which Android versions?
@ghinda I first tested (Android 4.1.2 stock browser) only the standalone version and got it working, both light switch and toggle switch. Now I've checked Bootstrap (both do not work!) and Foundation (light switch is broken, toggle switch is OK). This may help in identifying the cause.
@sompylasar Thanks for the testing! I've opened an issue for the boostrap bug. #17
The light-switch in Foundation is an official component, so I don't have complete control over it, but I'll send a pull-request if I manage to fix something with it.
Great work on this guys! Really appreciate the speedy detective work and fix.