博客小改&问题总结

Typecho 1.0 beta 发布有近一月了,因为是 beta 版本所以一直没有更新,但在今天重构文章聚合页面时仍然频繁出现重定向循环,所以不能忍就更新了。更新后和之前没太大区别,增加了子分类,解决了重定向循环问题(之前开发版应该就解决了),还有就是感觉对数据库作了优化,因为之前用一段时间数据库就会有那么几 Kb 的冗余数据,但是更新后明显改善。70最近好像要把重心转移 Logecho 上面,win 系统不好折腾,linux 又上不了校园网,所以只能等回家在折腾它了。入了一个 rainy.pw 的米,虽说 pw 有成为垃圾米的趋势,但因为自己还没有一个网名米,加之价格便宜,就入了。至于用途,还在考虑,也许仅仅是作一个博客的跳转吧。

关于博客的整体风格,从四月份设计现有主题以来,一直在修改。最近才进行了较大的改动。刚开始准备加入响应式的支持,但是没有从设计时考虑,现在去修改无疑会不协调,应该从设计之初就应该考虑到在不同设备下的表现而不是后天去修补。这么窄的模板,响应式的意义在哪里?面对最近手持设备720P屏幕的标配,单栏窄栏主题可以很好的呈现了。什么?你说是要针对移动设备的交互以及UI进行优化?好吧,懒。也许过些日子会用 jquery mobile 框架尝试它。响应式布局?那是下一个主题的事情啦。

简单说一下对主题的改动以及遇到的曾很棘手的问题:

改动

  1. 整体以线条的风格为主,主页也抛弃了原来 hover 下的色块;
  2. 归档页面不再使用 justArchive 插件实现,直接在主题下建立模板实现,并改为线条风格;
  3. 评论列表的区域调整为直角扁平线条风格,以和网站整体协调;
  4. 对文章内容页面及其它页面的标题大小重新规定,以形成整个博客的标题分级;
  5. 404和搜索错误页面重构(只是简单、简单、简单),文章标签、分类列表页面及搜索列表页重构;
  6. 弃用了 hermit 音乐插件,因作者对 typecho 支持不够,所以会间歇性出现问题。改用网易云音乐直接插入;
  7. jquery 库引用改为新浪云平台;
  8. 全站弃用图片,还是简单、简单、简单;
  9. 解决了 css3 的 transition 属性在 webkit 内核浏览器下的闪动 BUG(强迫症患者简直不能忍,终于解决,见下文)
  10. 其它小修小改。

问题

上文提到了那个 css3 的 transition 属性 bug,由于我使用 chrome 较多,所以每每打开博客都会发现这个问题。具体表现为:在首页和内容页面,用鼠标滚轮快速上下滚动(作撸滚轮状),会发现页面上下方出现闪动,页面透明如 PS 透明画布。当然,在不同的平台下表现有所不同。在双显卡笔记本上无论 win7、win8 下的 chrome 都会出现此问题,mac 和 linux 下均无此问题,但奇怪的是在学校的 XP 老爷机子上面竟然没有这个问题。好吧,凌乱。今晚看到了淘宝UED官博的文章>>戳这里<<,解决了这个问题。

文章给出的问题解决方案:

1
2
-webkit-backface-visibility: hidden; (设置进行转换的元素的背面在面对用户时是否可见:隐藏)
-webkit-transform-style: preserve-3d; (设置内嵌的元素在 3D 空间如何呈现:保留 3D)

测试后发现第二种方法无效,第一种加了 css 后,首页不闪动了。惊喜。但是……

在评论列表页面滚动的时候,又闪瞎了双眼。

开始分析问题出在哪里,在博客的样式里,对全站链接、首页列表文章、搜索、图片、导航链接等应用了 transition,解决方案给出的代码加在应用了属性的这些元素里。OK,都没有问题。评论列表页含有图片、链接。是这些影响了吗?
把图片、链接的部分 delete node,结果闪动消失,说明确实是它们影响。这时候看原文,注意到回复里的这句话:

这个问题在做 webApp(iphone)时尤为明显,这个问题主要是3d加速的问题,在启用3d加速时浏览器会为不同的层加速然后合并,所以启用3d加速的那个域(div)就十分关键。

加到哪个域(div)是解决问题的关键。于是在 comment-list 里加入,完美解决了。

看文章作者引用链接>>戳这里<<里面的解决方案:

Back to the original problem, these are my thoughts:

  1. You mention Safari & Chrome (so, webkit). Is the problem only on those browser? Which would lead to -webkit suspicious properties.
  2. If so, -webkit-backface-visibility: hidden; or -webkit-transform-style: preserve-3d; are still good candidates to be tried.
  3. Did you attach them on the .swatch class? (not hover state,otherwise, they will be considered too late, as the animation will be played directly).
  4. You stated that the whole page is blinking? Strange as only the swatches should be impacted.

即将包含 transition 的区域应用-webkit-backface-visibility:hidden;,对伪类则不运用此样式。原文说了,They will be considered too late, as the animation will be played directly.

貌似这个问题很早就有了,据说 chrome 更新后修正了这个 bug,但自己的 chrome 一直是最新版也存在这个问题,具体的底层原因仍不清楚,猜测可能与显卡有关,因为在双显卡笔记本上无一例外的存在这个问题。

END

本博客所有文章除特别声明外,均采用 CC BY-NC-ND 4.0 许可协议。转载请注明出处! © 雨落
  1. 1. 改动
  2. 2. 问题