5

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

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

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

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

我更多地使用 CSS 并发现 -webkit-transform3d 使轮子在所有事物之前运行，就像它在所有事物之上都有自己的层一样。

过了一会，我终于发现问题是因为我的菜单栏有“位置：固定；” 在他们身上，所以他们坚持视口。一旦将它们放到“位置：静态；”之外的其他位置，浏览器似乎就会搞砸一切，包括 Mobiscroll。

我需要保持这些菜单固定，页面中还有其他元素将获得“位置：绝对；”

知道我应该如何解决这个问题吗？我应该破解 Mobiscroll 的 CSS 和 JS 以摆脱 transform3d 和背景，使其看起来工作得还不错，还是对于那个可怕的设备有更好的解决方案？

如果您还需要什么，请告诉我！

谢谢！

4

4 回答 4

5

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

于 2012-10-15T14:21:22.810 回答
1

我也面临这个问题..它很烂。

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

于 2012-11-12T09:49:50.087 回答
0

我知道它有点晚了。但这为我解决了问题，

-webkit-backface-visibility: hidden

在 div 上

于 2013-09-11T12:25:28.940 回答
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');
                        }
                    });
于 2013-02-07T05:18:09.663 回答