CSS3 Scale with reflect让chrome上的模糊元素 [英] CSS3 Scale combined with reflect makes blurred elements on chrome

问题描述

当你尝试结合css3 scale和css3反射在一个div和内容时，chrome上有一个奇怪的错误。

There is a kind of weird bug on chrome when you try to combine css3 scale and css3 reflect on a div with content.

我想知道如果有人

*我的div的内容可以是text，video，image，svg ...并且可以包含动画

*The content of my div can be text, video, image, svg... and can contain animation

我用下面的代码来说明问题

I made the following codepen to illustrate the problem

http://cdpn.io/muiKa

推荐答案

看起来像是最好的办法是用良好的老式em缩放替换变换缩放。 Chris Coyer有一个很棒的文章，其中包含示例： http://css-tricks.com/rems-ems/

It looks like your best bet is to replace the transform scaling with good old fashioned em scaling. Chris Coyer has a awesome article with examples: http://css-tricks.com/rems-ems/

这篇关于CSS3 Scale with reflect让chrome上的模糊元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！