爱淘FE

Posted by:
Mickey

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

602

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

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

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

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

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

Posted by:
Mickey

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

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

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

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

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

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

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

Posted by:
Mickey

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

1,107
碎碎念——拥抱标准

碎碎念——拥抱标准

新年第一天上班,有些碎碎念,无中心无思想~ 群里抛出了个链接,chrome已经自带将线上文件代理到本地磁盘的功能 亲测,好用,只是第一次页面生效有点延迟。 下图是某页将sui.css的请求map到本地开发中wsui(无线商家版sui)的例子 替换前: 替换后: 突然想到 以前在mac下辗转学习尝试天 …

Posted by:
Mickey

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

1,534
CSS中zoom的趣用

CSS中zoom的趣用

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

Posted by:
Mickey

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

995

主要记下reflow吧

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

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

Posted by:
Mickey

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

5,353
sed 在Mac下日常使用的差异

sed 在Mac下日常使用的差异

简介 sed : stream editor,流编辑器,用coding的模式来编辑,对工程师来说, 一些频繁的批量修改、替换代码文件非常高效 ,也相当hacker。过程基本就是正则模式匹配+修改,所以对熟悉正则表达式还是蛮有裨益的。 基本用法 此处略。。。 (看耗子叔的sed 简明教程 就可以很快上 …

Posted by:
Mickey

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

1,010

file input的在IE下不能程序的修改值的问题

背景 开发upload插件在使用时,是通过监听file input 的change事件获取该input的值然后进行后续上传逻辑。 有一个常见的场景(可能真实用户很少会这样做)就是: 上传图片A,然后删除图片A,再上传图片A。 对应html控件的变化是 file input由用户选择文件而设值,然后通 …

Posted by:
Mickey

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

1,228

关于window.open 使用

记不得多久了,自从高级浏览器以及IE都更新了安全策略后,window.open 开始受这个策略影响会被阻止弹出,使我们心理上有些排斥这个用法。 而实际上浏览器只是阻止非用户交互立即产生的打开窗口这个操作,如果足够实时,比如直接响应click后执行 window.open ,那还是有效的。 直接上2个 …

Posted by:
Mickey

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

4,985

加速!优化Angular应用性能

性能的考虑 AngularJS是一个非常优秀且改变攻城狮思维方式的框架,能够帮助我们有调理的组织代码的MV*结构。 虽然他本身已经built-in了很多性能优化工作,普通富前端应用可能不需要考虑太多,但毕竟框架很庞大,碰到逻辑复杂的场景,难免遇到瓶颈。 Google一波已经有不少优化方案了,这里再抛 …

Posted by:
Mickey

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

1,657

JavaScript中的==,===和< 运算符

== 和 === js中的 == 和 ===应该说是最容易让人在初期产生迷惑的,正好看到几个国外网站对此进行了总结,之一是在github上,实现上用的是table,排版上看起来实在是乱 Craig Gidney看不下去了,用canvas实现了一遍,原理也很简单。考虑到翻墙的因素,这里进行搬运并整理。 …

back up ↑