资讯专栏INFORMATION COLUMN

transform导致的border-radius失效

wwq0327 / 1899人阅读

摘要:在写一个移动端的类似进度条的动画时遇到了一个问题,父元素设置了属性,然后,子元素最初没有问题,但是加上了一个动画后,原先边界处圆角应该隐藏的地方溢了出来,最开始以为是定位的问题,但是改用了方式定位还是不行,后来发现可能是由于的问题,在父元

在写一个移动端的类似进度条的动画时遇到了一个问题,父元素设置了border-radius属性,然后overflow:hidden,子元素最初没有问题,
但是加上了一个animate动画后,原先边界处圆角应该隐藏的地方溢了出来,最开始以为是position定位的问题,
但是改用了margin方式定位还是不行,后来发现可能是由于transform的问题,
在父元素上加上一行-webkit-transform:rotate(0deg)即解决了,附上代码

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/114471.html

相关文章

  • transform导致border-radius失效

    摘要:在写一个移动端的类似进度条的动画时遇到了一个问题,父元素设置了属性,然后,子元素最初没有问题,但是加上了一个动画后,原先边界处圆角应该隐藏的地方溢了出来,最开始以为是定位的问题,但是改用了方式定位还是不行,后来发现可能是由于的问题,在父元 在写一个移动端的类似进度条的动画时遇到了一个问题,父元素设置了border-radius属性,然后overflow:hidden,子元素最初没有问题...

    Sleepy 评论0 收藏0
  • 移动前端开发经验小结

    摘要:一概要本文档针对移动前端开发,包括里面的页面,非应用。一个失败的圆圆角在移动平台上开发时,用画一个圆很简单,只需要一句代码不过,在上,这个定义将会失效,而显示为默认的矩形。 一、概要 本文档针对移动前端开发,包括 Hybrid 里面的web页面,非 Native 应用。 二、适用 所有经验适用于:iOS6.0+, Android4.0+ 三、小结 css伪类:active 如果你想使...

    Zoom 评论0 收藏0
  • 移动前端开发经验小结

    摘要:一概要本文档针对移动前端开发,包括里面的页面,非应用。一个失败的圆圆角在移动平台上开发时,用画一个圆很简单,只需要一句代码不过,在上,这个定义将会失效,而显示为默认的矩形。 一、概要 本文档针对移动前端开发,包括 Hybrid 里面的web页面,非 Native 应用。 二、适用 所有经验适用于:iOS6.0+, Android4.0+ 三、小结 css伪类:active 如果你想使...

    baiy 评论0 收藏0
  • 移动端兼容问题总结(1)

    摘要:原文地址键盘类型问题描述在上只需要更换即可更改键盘类型,无效。补充解决方式输入法顶起页面问题描述页面被输入法顶起,导致滚动,无法锁定解决方式在当前容器外层再包裹一层,使用来解决这个问题,做一个容器内滚动。 原文地址: https://luoyangfu.com/article... input 键盘类型问题 描述: 在android上只需要更换type 即可更改键盘类型,ios无效。...

    arashicage 评论0 收藏0

发表评论

0条评论

wwq0327

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<