西门的后花园

一个热爱网络的年轻人的博客

使用CSS3的transition、visibility和opacity做淡入淡出效果不兼容的解决方案

刚做移动端页面的时候,看到一些成熟的网页做淡入淡出的弹窗遮罩效果,都喜欢用css里transition、visibility和opacity这三个属性,通过改变他们的值,结合js增减class即可,非常方便。上周做的一个项目,开发找我报bug,说是一个界面出不来,我看了下就是这段代码。然后重新测试了一下,发现这段代码在iOS8、9、10都有问题,之前为什么都没发现?

Android设备UC浏览器在某些时候不支持:empty伪类选择符

我的一个项目,开发那边遇到一个bug,他的小米手机UC浏览器里操作消息数目的时候,消息数字永远不出来,然后从别的页面切回去,再回来,就有了。发现我两个Android设备的UC都有这个bug。排查到最后,发现同事在公共代码里加了一句类似:empty{display: none;}代码,最后发现是这家伙的问题。

解决iOS里fixed中有input文本框bug

移动端里对悬浮效果支持不是很好。例如PC端里很常见的页面滚动到一定距离,导航悬浮效果,页面scroll的时候计算滚动条和顶部距离,加fixed就可以了。但移动端里,基本上所有手机,页面滚动的时候,任何js都不会执行。所以手机里这个效果,得等到页面停止滚动,导航才会悬浮。

简单介绍移动端CSS3单位rem的用法和bug的解决办法

PC端大部份是用px单位,小部分用em单位,而移动端,请全部用rem单位吧。目前大部份设备,包括但不限于iOS 5+、Android 2.3+、Window Phone 8+都是可以兼容的,具体兼容表请看caniuse。

分类目录