Question

我们在移动网站上使用Mobiscroll，它运行得很好，除了在一台设备上：我的老板＆＃39;三星Galaxy S3（运行股票三星FW和股票浏览器，但Mobiscroll与Chrome合作）。看起来所有元素的z-index都搞砸了。

看起来像这样： http://pix.toile-libre.org/?img=1350013732.png

一切都是黑暗的，难以阅读，数字超过了箭头。

我玩了一下CSS并删除了页面的透明背景，这使得所有颜色都恢复正常（由于某些原因，我无法让它落后）。但轮子的数量仍然在箭头前面。

我使用CSS玩得更多，并发现-webkit-transform3d让轮子在所有东西前面，就好像它拥有它自己的层一样。

过了一会儿，我终于发现问题是由于我的菜单栏有＆＃34; position：fixed;＆＃34;在他们身上，所以他们坚持到视口。只要将它们放在除了＆＃34; position：static;＆＃34;之外的其他东西上，浏览器似乎就搞乱了所有东西，包括Mobiscroll。

我需要修复这些菜单，并且页面中还有其他元素可以获得＆＃34; position：absolute;＆＃34;

知道我该如何解决这个问题？我应该破解Mobiscroll的CSS和JS来摆脱transform3d和背景，这样它似乎工作不错，或者是否有更好的解决方案来处理那个可怕的设备？

如果您还有其他需要，请告诉我！

谢谢！

Answer 1

看来这是一个android 4.0 bug。这里有一个错误报告： http://code.google.com/p/mobiscroll/issues/detail?id=96

Answer 2

我也面对这个问题..它糟透了。

我发现的唯一解决方案是使用mobiscroll onShow＆amp; onClose事件，隐藏并显示导致覆盖问题的这个位置固定元素（在可能的情况下是位置固定的页脚）。

Answer 3

$(".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');
                        }
                    });

Answer 4

我知道它迟到了。但是这对我有所帮助，

-webkit-backface-visibility: hidden

div上的

Mobiscroll +三星Galaxy S3 +位置：固定=碎卷轴？

4 个答案: