Bug

on Bug, Chrome with Comments

使Chrome字体渲染更平滑

更新 2014/9/5：没想到今天无意中看到google更新到了chrome37，chrome字体渲染问题居然已经被解决了！坑啊！早知道不码那么多字了... Chrome在文字渲染上始终存在一些不大不小的问题，如早期我在Chrome中的text-shadow 一文中提到的字体阴影抗锯齿bug，虽然影响不大，却总是不如人意。 最近让我觉得不爽的依旧是Chrome(似乎只涉及windows版本)的字体渲染的问题，Chrome在小字体显示的时候无法准确使字体平滑，从而在字体不大不小的时候，可以清楚地看到文字的锯齿。而当使用字体图标时，这种感觉就变得更为明显。 稍稍尝试就会发现，值48px是一个分界点。即在字体大于48px的时候并不会出现锯齿，这应该与Chrome渲染字体时使用的算法不同有关。而如果字体很小(<20px)，也会因为线迹太细而不够明显。当字体48px时，…

on Bug, Chrome, CSS with Comments

Chrome的onload动画bug

一开始的起的标题是《Chrome中CSS3 transition和form导致的意外的onload动画》，不过太长了，所以最后删减了一下。但至少我遇到这个chrome的bug的时候，确实是transition和form同时出现时。 这个bug的具体的表现是：chrome会在页面加载后自动开始一段动画。 我使用的是chrome 36.0.1985.125 m，算是当前的最新版。页面中的全局样式添加了<a>的transition，而且还是非常偷懒的使用了all这样的参数，所以最后整个页面在加载完成后，所有的<a>都开始了过度效果，从尺寸到颜色，结果就导致了的整个页面的抖动。…

on Browser, Bug with Comments

Chrome的alert与重复focus

前段时间，在写一个placeholder插件的时候，遇到了一个Chrome下的诡异问题，一段简单的代码，就可以使得浏览器弹出无限循环的 alert 提示框。 我用的代码片段精简到最后是这样的： <input id="test" placeholder="placeholder" type="text" /> <script type="text/javascript"…

on IE6, IE7, IE8, IE, Bug with Comments

IE Alpha Filter Bug: #02050a色值像素透明化

IE的透明滤镜bug算的上是IE为数众多bug里的不起眼的角色，直到之前我确实的遇到了它，我想我根本不会去关注非标准的IE滤镜带来的各种问题。这个bug的表现非常的直观，filter透明度渐变后，图片的某些点变成了透明的了！比如如果这个时候背景是白的，就是白色的噪点。这在banner切换时表现的非常明显——渐变是产生噪点，渐变完成后噪点也会一直残留： 这个Bug在IE6 7 8里都存在，实际上只要使用了透明滤镜就会表现出来，并且非常有趣的是，它只对一种颜色值有反应：#02050a 为什么是这个颜色？恐怕只有微软才知道。一开始我只是以为只有一些偏黑色的图片会出现这样的情况，但后来经过一系列测试我才发现原来出现的噪点如此固定以至于所有噪点所在的像素点原来的色值都是#02050a，决然不是巧合。然后，如果google这个"#02050a"，就能找到关于它的各种文章了，…

on Bug, Chrome with Comments

Chrome中的text-shadow

text-shadow作为CSS3里被现代浏览器支持最早、也是最广的属性，我们对它已经非常熟悉。现代浏览器除了IE9之外，全部无前缀支持text-shadow。和box-shadow类似，但远没有box-shadow那么复杂。它的作用只是对文本添加阴影: text-shadow: 2px 2px 3px blue; 其用法有大致上有两种，一种是在浅色背景上应用深色阴影凸显出文字的层次。另一种，就是在深色背景上使用浅色阴影创造出类似浮雕的内嵌的效果。最后用的比较少的，就是单纯的雾化文本，也就是X和Y的偏移设为0——不过这样对文本的可读性没什么好处，也没什么技术含量，所以完全不值得提倡。淘宝曾在首页的热卖单品区单纯的使用text-shadow雾化文本，但现在已经移除了这种蛋疼的效果。 我并不打算花时间展开text-shadow，因为这个属性相当简单，所以text-shadow本身并不是本文的重点。这里要写的是：text-shadow在Chrome下的bug以及关于这个bug的一些有趣的事。…