2013-10-09 29 views
1

我正在开发一个新的响应式网站,我在处理iOS设备上的测试时遇到了很多麻烦。我为使用CSS3转换的移动和平板电脑用户创建了滑动面板菜单显示(la旧的Facebook应用程序),然后使用jQuery添加/删除几个类以在滑动面板展开时锁定滑动面板。iOS上的CSS3和jQuery Transition Flash

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

链接到试验场:http://staging.michalekbrothersracing.com/css-sliding-panel/

没有人有任何固定这样的错误的经验吗?我会感激和帮助,你可以提供。谢谢!


UPDATE:

我搞砸与它周围的多一点,我想我已经分离出其中的闪烁的来源。我是jQuery的新手,充其量我一起窃听一堆东西,所以这很可能是我的错。这部分代码在滑动面板打开时冻结,当我不包含它时,面板在打开前不再闪烁。任何想法可能会导致它或ide的潜在补救措施?

<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'); 
      } 
     }); 
    });    

回答

3

我相信你可以添加transform: translateZ(0);的元素得到它的硬件加速,这应该去除毛边。

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

iOS的注意事项您需要在transform属性名称前加上-webkit-

+0

谢谢,杰士伯。我试过这个解决方案,但不幸的是它没有解决问题。我做了一些更多的挖掘后更新了原始文章,我相信我已经隔离了导致问题的代码段。 –