Question

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

我遇到的问题是，当您选择滑动面板时，该面板中的所有内容在iOS设备上开始滑动之前会短暂闪烁白色。但是，当我关闭面板时，它工作得很好并且没有闪光灯。如果我在桌面浏览器上测试它，它不会在打开或关闭时闪烁。

指向测试网站的链接：http://staging.michalekbrothersracing.com/css-sliding-panel/

有没有人有修这样的bug的经验？我很感激和帮助你提供。谢谢！

更新：

我已经把它弄乱了一点，我想我已经隔离了闪烁的来源。我是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');
            }
        });
    });

Answer 1

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

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

对于iOS，您需要在transform属性名称前添加-webkit-前缀。

iOS上的CSS3和jQuery Transition Flash

1 个答案: