我正在使用PhoneGap构建iOS应用程序.我正在使用translate3d CSS动画来创建“翻转”效果.

这对于更简单的元素非常有用……带有前/后div的DIV,可能还有一两个额外的跨度.

但是当我试图翻转一个更大的元素…即整个屏幕时,我会重绘毛刺.一旦我交换css类开始转换会发生什么,’bottom’div的部分弹出’top’div,然后翻转发生,然后它们再次弹出.并且它不是显示的整个元素……它是沿着轴分割的元素的一半,我正在进行平移3d旋转.

关于可能导致这种情况的任何想法或理论?在iPad上作为应用程序和在Safari中的桌面上都会发生相同的情况,因此似乎是一个webkit问题.

可能是一些CSS问题?或者是否尝试使用具有大背景图像的复杂嵌套元素进行全屏translate3d旋转,这比Safari可以处理的更多?

更新1:

我在缩小问题方面取得了进展.

发生的事情是,当我执行translate3d翻转时,“偷看”的元素恰好是之前通过translate3d定位的子元素.

我希望使用translate3d转换的“页面”结构:

<div id="frontbackwrapper">
    <div id="front">    
    </div><!--/front-->
    <div id="back">  
    </div><!--/back-->
</div><!--/frontbackwrapper-->

这适用于它自己.前部div由后部div替换,具有卡片翻转效果.

问题是在进行整页翻转之前,我已经使用translate3d在#front div中设置了一些元素:

<div id="frontbackwrapper">
    <div id="front">  

        <div class="modal"></div>  

    </div><!--/front-->
    <div id="back">  
    </div><!--/back-->
</div><!--/frontbackwrapper-->

示例CSS:

.modal {
    width: 800px;
    height: 568px;
    position: absolute; 
    left: 112px;
    z-index: 100;
    -webkit-transition-duration: 1s;
    -webkit-transform: translate3d(0,-618px,0); /* set off screen by default */
 }
.modal.modalOn {
    -webkit-transform: translate3d(0,80px,0); /* slides the div into place */
 }

如果 – 而不是使用translate3d – 我只是重新定位顶部样式的div或转换顶部属性,我没有得到偷看问题.当然,这意味着我必须分别放弃光滑的动画或硬件加速.

此时,它看起来像一个webkit错误.我会一直在玩它.如果有人在此之前遇到过这种情况并找到了解决方法,我全都听见了!

解决方法

解!经过一夜的睡眠,我仔细考虑了罪魁祸首以及如何处理它.它不一定是使用translate3d为子元素设置动画的行为,而是在翻译的元素在使用translate3d对其父级进行动画处理时具有该CSS属性的面部.

修复方法是首先为子元素设置动画,然后一起删除翻译样式.

CSS结构现在是:

/* default class for the start of your element */
.modal-startposition {
  -webkit-transition-duration: 1s;
  -webkit-transform: translate3d(0,0);
  }

/* add this class via jQuery to then allow
   webkit to animate the element into position */
.modal-animateposition {
  -webkit-transform: translate3d(0,0);
}

/* when animation is done,remove the above class
   and replace it with this */
.modal-endposition {
  top: 80px;
}

还有一些示例jQuery:

//[attach a click event to trigger and then...]
$myModal
    .addClass("modal-animateposition")
    .on('webkittransitionend',function () {
         $myModal
            .removeClass('modal-startposition')
            .removeClass('modal-animateposition')
            .addClass('modal-endposition');
    });

有点乏味,但它完全修复了屏幕重绘问题.

编辑:更正了一个错字

ios – webkit translate3d问题(peek-thru)的更多相关文章

  1. 吃透移动端 1px的具体用法

    这篇文章主要介绍了吃透移动端 1px的具体用法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  2. 基于HTML5+Webkit实现树叶飘落动画

    本文给大家分享一段实例代码给大家介绍基于HTML5+Webkit实现树叶飘落动画效果,需要的朋友参考下吧

  3. HTML5 3D书本翻页动画的实现示例

    这是一款十分炫酷的HTML5 3D书本翻页动画,效果相对比较简单,拖拽鼠标模拟用手翻页,需要的朋友们下面随着小编来一起学习学习吧

  4. ios – webkit translate3d问题(peek-thru)

    我正在使用PhoneGap构建iOS应用程序.我正在使用translate3dCSS动画来创建“翻转”效果.这对于更简单的元素非常有用……在iPad上作为应用程序和在Safari中的桌面上都会发生相同的情况,因此似乎是一个webkit问题.可能是一些CSS问题?或者是否尝试使用具有大背景图像的复杂嵌套元素进行全屏translate3d旋转,这比Safari可以处理的更多?

  5. ios – x轴的webkit溢出滚动问题?

    我有一个可滚动的div与以下css:但是在iOS设备上,当div内部的内容比div本身宽时,启用x轴滚动.如何禁用x轴滚动?解决方法我一直有同样的问题,似乎不幸的是-webkit-overflow-scrolling没有x/y选项.我通常使用的解决方法是将滚动div包装在overflow-x:hiddendiv中,问题应该解决.标记:造型:

  6. 阅读iOS Webkit崩溃堆栈跟踪

    b)有没有任何其他见解,任何人都可以看到我得到的堆栈跟踪建议?解决方法我最终根据上面描述的理论进行了代码更改.在做出这些改变之后,我没有看到崩溃再次发生.所以原始理论看起来是正确的.

  7. ios – Iphone / Ipad在缩放时崩溃

    i=hUb1GHJ6有没有人有什么可能出错的线索?解决方法我们正在做很多调试,我们终于找到了一个解决方案.我们有一个“跳过导航”链接,只有在您的键盘上按“标签”时才显示.这最初设置为“text-indent:-10000px”.这可能导致视口宽度超过10000像素,然后导致手机使用太多内存,然后最终崩溃.我们已经通过删除这个CSS规则来解决这个问题,所以blush.no不会崩溃那么多了.Iphone仍然有内存泄漏的问题,直到他们解决这个问题,网站有时会崩溃,但不会像以前那样接近.

  8. 如何在iOS和Android上正确使用-webkit-device-pixel-ratio?

    -webkit设备像素比查询由iOS和Android都支持,但由于iOS不支持target-densitydpi=device-dpi,因此导致不同的结果.例如:会使galaxyNexus上的字体看起来不错,但是在iPhone4上它会变得太大了.有没有办法在iOS上模拟target-densitydpi=device-dpi,或者在iOS上禁用-webkit-device-pixel-ratio,并将其用户的模糊图像作为备用模式?

  9. iOS 8 UIWebView内存管理

    我试图stopLoading:UIWebView的实例方法来保存一些内存,但它也没有解决问题.除了我不完全理解ARC的工作过程,我无法确保自己是否通常使用每个新打开的详细信息视图的系数增加内存.先感谢您!

  10. swift – 与WKWebView进行JavaScript同步本地通信

    使用WKWebView可以在JavaScript和Swift/Obj-C本机代码之间进行同步通信吗?

随机推荐

  1. iOS实现拖拽View跟随手指浮动效果

    这篇文章主要为大家详细介绍了iOS实现拖拽View跟随手指浮动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  2. iOS – genstrings:无法连接到输出目录en.lproj

    使用我桌面上的项目文件夹,我启动终端输入:cd然后将我的项目文件夹拖到终端,它给了我路径.然后我将这行代码粘贴到终端中找.-name*.m|xargsgenstrings-oen.lproj我在终端中收到此错误消息:genstrings:无法连接到输出目录en.lproj它多次打印这行,然后说我的项目是一个目录的路径?没有.strings文件.对我做错了什么的想法?

  3. iOS 7 UIButtonBarItem图像没有色调

    如何确保按钮图标采用全局色调?解决方法只是想将其转换为根注释,以便为“回答”复选标记提供更好的上下文,并提供更好的格式.我能想出这个!

  4. ios – 在自定义相机层的AVFoundation中自动对焦和自动曝光

    为AVFoundation定制图层相机创建精确的自动对焦和曝光的最佳方法是什么?

  5. ios – Xcode找不到Alamofire,错误:没有这样的模块’Alamofire’

    我正在尝试按照github(https://github.com/Alamofire/Alamofire#cocoapods)指令将Alamofire包含在我的Swift项目中.我创建了一个新项目,导航到项目目录并运行此命令sudogeminstallcocoapods.然后我面临以下错误:搜索后我设法通过运行此命令安装cocoapodssudogeminstall-n/usr/local/bin

  6. ios – 在没有iPhone6s或更新的情况下测试ARKit

    我在决定下载Xcode9之前.我想玩新的框架–ARKit.我知道要用ARKit运行app我需要一个带有A9芯片或更新版本的设备.不幸的是我有一个较旧的.我的问题是已经下载了新Xcode的人.在我的情况下有可能运行ARKit应用程序吗?那个或其他任何模拟器?任何想法或我将不得不购买新设备?解决方法任何iOS11设备都可以使用ARKit,但是具有高质量AR体验的全球跟踪功能需要使用A9或更高版本处理器的设备.使用iOS11测试版更新您的设备是必要的.

  7. 将iOS应用移植到Android

    我们制作了一个具有2000个目标c类的退出大型iOS应用程序.我想知道有一个最佳实践指南将其移植到Android?此外,由于我们的应用程序大量使用UINavigation和UIView控制器,我想知道在Android上有类似的模型和实现.谢谢到目前为止,guenter解决方法老实说,我认为你正在计划的只是制作难以维护的糟糕代码.我意识到这听起来像很多工作,但从长远来看它会更容易,我只是将应用程序的概念“移植”到android并从头开始编写.

  8. ios – 在Swift中覆盖Objective C类方法

    我是Swift的初学者,我正在尝试在Swift项目中使用JSONModel.我想从JSONModel覆盖方法keyMapper,但我没有找到如何覆盖模型类中的Objective-C类方法.该方法的签名是:我怎样才能做到这一点?解决方法您可以像覆盖实例方法一样执行此操作,但使用class关键字除外:

  9. ios – 在WKWebView中获取链接URL

    我想在WKWebView中获取tapped链接的url.链接采用自定义格式,可触发应用中的某些操作.例如HTTP://我的网站/帮助#深层链接对讲.我这样使用KVO:这在第一次点击链接时效果很好.但是,如果我连续两次点击相同的链接,它将不报告链接点击.是否有解决方法来解决这个问题,以便我可以检测每个点击并获取链接?任何关于这个的指针都会很棒!解决方法像这样更改addobserver在observeValue函数中,您可以获得两个值

  10. ios – 在Swift的UIView中找到UILabel

    我正在尝试在我的UIViewControllers的超级视图中找到我的UILabels.这是我的代码:这是在Objective-C中推荐的方式,但是在Swift中我只得到UIViews和CALayer.我肯定在提供给这个方法的视图中有UILabel.我错过了什么?我的UIViewController中的调用:解决方法使用函数式编程概念可以更轻松地实现这一目标.

返回
顶部