1

我正在开发一个新的响应式网站，但在找出在 iOS 设备上测试时遇到的问题时遇到了很多麻烦。我使用 CSS3 转换为移动和平板电脑用户创建了一个滑动面板菜单显示（一个旧的 Facebook 应用程序），然后我使用 jQuery 添加/删除一些类以在滑动面板展开时锁定它。

我遇到的问题是，当您选择将面板滑过时，该面板中的所有内容在 iOS 设备上都会短暂闪烁白色，然后才开始滑过。但是，当我关闭面板时，它运行良好并且没有闪光灯。如果我在桌面浏览器上测试它，它不会在打开或关闭时闪烁。

链接到测试站点：http ://staging.michalekbrothersracing.com/css-sliding-panel/

有没有人有修复这样的错误的经验？我很感激你能提供的帮助。谢谢！

更新：

我已经搞砸了一点，我想我已经隔离了闪烁的来源。我是 jQuery 的新手，充其量我正在一起破解一堆东西，所以这很可能是我的错。这部分代码在滑动面板打开时冻结它，当我不包含它时，面板在打开之前不再闪烁。知道什么可能导致它或潜在的补救措施吗？

<script type='text/javascript'>
$(function(){
        $('input:checkbox').change(function(){
            if($(this).is(":checked")) {
                $('#content-container', 'body').addClass('freeze');
                $('#content-container').removeClass('scrollable');
                $('#mobile-nav').scrollTop(0);
            } else {
                $('#content-container', 'body').removeClass('freeze');
                $('#content-container').addClass('scrollable');
            }
        });
    });

4

1 回答 1

3

我相信您可以添加transform: translateZ(0);到元素以使其硬件加速，这应该删除闪存。

我的理解是，当您应用 3D 变换时，您正在从 CPU 渲染层获取一个元素并将其移动到 GPU 渲染层。当这种转变发生时，你会得到那个闪光。通过默认为元素添加 3D 变换，它位于 GPU 渲染层（在支持的设备/操作系统上）。

请注意，对于 iOS，您需要在该transform属性名称前加上-webkit-.

于 2013-10-09T15:17:04.157 回答