5

We are using Mobiscroll on our mobile website and it works just fine, except on one device: My boss' Samsung Galaxy S3 (runs stock Samsung fw and stock browser, but Mobiscroll works fine with Chrome). It looks like the z-index of all the elements get messed up.

It looks like this: http://pix.toile-libre.org/?img=1350013732.png

Everything is dark and hard to read, and the numbers go over the arrows.

I played a bit with the CSS and removed the transparent background of the page, which made all the colors go back to normal (I was not able to make it go behind as it should for some reasons). But the numbers of the wheels still goes in front of the arrows.

I played even more with the CSS and figured out that the -webkit-transform3d makes the wheels go in front of everything, like if it had it's own layer on top of everything.

After a while, I finally found that the problem is caused because my menu bars have "position: fixed;" on them so they stick to the viewport. As soon as put them to something else than "position: static;", the browser seems to mess up everything, including Mobiscroll.

I need to keep these menus fixed, and there are other elements in the page that will get "position: absolute;"

Any idea how I should solve this? Should I hack the CSS and JS of Mobiscroll to get rid of the transform3d and the background so it appears to work not bad, or is there a better solution for that horrible device?

Please tell me if you need anything else!

Thanks!

Max-P
  • 338
  • 2
  • 11
  • Does this happen on other android devices? It seems to be, from what you say, isolated to his handset, and in turn would likely make this an issue with that devices browser, and not your code... and maybe even a glitch with his phone specifically. – Patrick JC Oct 12 '12 at 05:42
  • Also, have you tried going to the mobiscroll demo page with his phone to see if their demo has issues as well? – Patrick JC Oct 12 '12 at 05:45
  • 1
    The demo page works fine, Mobiscroll itself works fine. It's as soon as I position something in the page that's either static or fixed, the browser messes everything up. As zolipapa said, it seems to be an Android 4.0 bug, but since Samsung still haven't released Jellybean on the S3, I will likely have to support it even if it's the browser that's crap. – Max-P Oct 16 '12 at 01:53

4 Answers4

5

It appears that this is an android 4.0 bug. There is a bug report on it here: http://code.google.com/p/mobiscroll/issues/detail?id=96

zolipapa
  • 646
  • 6
  • 14
  • 1
    Thanks, I will apply the suggested fix (hide the fixed elements when the slider is opened) until Samsung releases their overdue OTA updates. I googled a lot, that's weird I never found it on the tracker. – Max-P Oct 16 '12 at 02:02
1

I face this problem also.. its sucks.

The only solution ive found, is to use mobiscroll onShow & onClose events, to hide and show this position fixed element which cause the overlays problem (in may case that was the footer that was position fixed).

Idan Gozlan
  • 3,173
  • 3
  • 30
  • 47
0
$(".date-picker").mobiscroll().date({
                        onShow: function(html, inst) {
                            var header = $('div[data-role="header"]');
                            if(header) header.css('position', 'absolute');
                            var footer = $('div[data-role="footer"]');
                            if(footer) footer.css('position', 'absolute');
                        },
                        onClose: function(html, inst) {
                            var header = $('div[data-role="header"]');
                            if(header) header.css('position', 'fixed');
                            var footer = $('div[data-role="footer"]');
                            if(footer) footer.css('position', 'fixed');
                        }
                    });
Robin C Samuel
  • 1,215
  • 15
  • 33
0

I know its kind of late. But this did the fix for me,

-webkit-backface-visibility: hidden

on the div

clu3Less
  • 1,812
  • 3
  • 17
  • 20