爱淘FE

Posted by:
Mickey

每件事最后都会是好事,如果不是好事,说明还没到最后

793

transform3D在移动端重叠animation作用时的闪烁问题

之前项目后期发现一个诡异的问题,场景描述:

当视图切换到最后一页时,动画区域的元素被肢解的七零八落,看起来像是元素被分隔开闪烁着。

这个问题在PC浏览器上是正常的,在移动端的表现却是闪瞎了眼。

经过一阵定位,发现一些端倪:页内如果有2块元素分别做着transform动画,此时若至少有一个元素执行的是3D变形动画,那么这种情况必现。

Posted by:
Mickey

每件事最后都会是好事,如果不是好事,说明还没到最后

639
background-clip 组合拳的一个小玩法

background-clip 组合拳的一个小玩法

之前项目里有个半透明的Tag组件如下,长度随字数自增,箭头可左可右。

开始用代码实现,分拆为【圆角矩形+圆角三角】2个元素组合实现,但总是无法完美实现,原因至少有:

1. 半透明特性,若有重合区域会透明度叠加重影。
2. 两元素的高度定位总无法匹配一致(viewport缩放导致)。

多次折腾后摸索出一个方法

Posted by:
Mickey

每件事最后都会是好事,如果不是好事,说明还没到最后

1,650
CSS中zoom的趣用

CSS中zoom的趣用

zoom!? ie6/7 haslayout 各种hack 一提到css zoom,上面可能是大多数前端脑海中浮出的keyword. 在遥远的IE6、7年代 zoom: 1; 帮助前端啃下了很多老IE的梗,被当做万金油在出现IEbug时祭出,不少情况屡试不爽,以至于忽视了他原本的意思。 zoom最早 …

Posted by:
Mickey

每件事最后都会是好事,如果不是好事,说明还没到最后

1,158

主要记下reflow吧

repaint(重绘)在元素的外观经过改变,但没改变页面layout布局的情况下发生,如改变visibility、background、color、前景色等;
当repaint发生时,浏览器会验证DOM树上的所有其它结点的visibility属性。

reflow(回流)则是引起DOM操作相关脚本执行时低性能的一个关键点。页面上任一节点触发reflow,都会导致它的子节点、祖先节点重新渲染。

Posted by:
Mickey

每件事最后都会是好事,如果不是好事,说明还没到最后

610
IE与标准浏览器 cssText值的差异

IE与标准浏览器 cssText值的差异

不同浏览器 cssText 区别 差异

Posted by:
Mickey

每件事最后都会是好事,如果不是好事,说明还没到最后

577

块级格式化上下文Block Formatting Context—BFC

理解块级格式化上下文有时可以帮助我们解决长时间恼火的问题~

back up ↑