html弹出层很字体模糊了,由CSS3 transform 字体模糊问题揭示出浏览器渲染机制

为了实现垂直、水平居中效果，经常会用到

position: fixed;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

但是在实际项目中，会遇到居中弹出层的字体模糊问题。

先看两个对比图

两个div的居中写法一模一样，不同的地方就是第一个div 的宽高为奇数，第二个div的宽高为偶数。

为什么会出现第一个div的边框和文字都有些模糊的情况呢？

原因是在Chrome浏览器中使用translate进行位移的时候，如果选择的值是小数，位移的元素字体、边框、背景等都会出现模糊的情况。

举个例子：当宽高为201px的div，使用 transform: translate(-50%,-50%) 相当于div向左、上方各移动了100.5px，出现了小数点。

Chrome 面对位移了100.5px这个问题，采取了相对简单粗暴的方式，就是会渲染成100px、101px、100px、101px、100px ....

100px 和 101px 交替渲染，便出现了模糊。

但是Firefox浏览器和IE渲染的又没有问题，效果如下

两个div都没有出现模糊的现象。

这是浏览器对于含小数值px(像素)解析的差异渲染机制不同造成的。

当元素进入GPU中渲染时，在Chrome35+中为grayscale渲染，IE11和FF30保持sub-pixel渲染不变。

因此在Chrome浏览器中，若transform值函数，如translate3d(), scale(), rotate()等，其中的参数为非整数，会导致模糊问题。

·END·

面包理想

让涨工资变得简单

html弹出层很字体模糊了,由CSS3 transform 字体模糊问题揭示出浏览器渲染机制相关推荐

jbox弹窗_jbox很好的弹出层很好的弹出层 - 下载 - 搜珍网
压缩包 : jbox-v2.3.rar 列表 jBox/i18n/jquery.jBox-zh-CN.js jBox/jquery-1.4.2.min.js jBox/jquery.jBox-2.3. ...
css3 transform文字,CSS3 transform 字体模糊问题
使用 Vue Material 的 Dialog 做了一个弹出框,弹出框内动态绑定了几个数据,页面效果一出来 What the fuck? 马赛克? Vue Material 的组件肯定没问题,应该自 ...
html 5 桌面弹窗,HTML5+CSS3+jQuery实现弹出层
我们完全使用HTML5+CSS3+jQuery来实现一个基本的弹出层效果,因此我们可以在示例中任意修改弹出层外观样式.甚至js方法调用.我们最终做出来的弹出层效果应该是响应式的,也就是说可以在桌面PC ...
jquery 弹出层插件
最近在研究弹出层插件时发现网上很多插件功能很强大,同时插件也很庞大.在这里个人写了一个比较秀珍的弹出层插件. jquery.popdialog.js $(function () {$.fn.PopDi ...
分享123个JS特效弹出层，总有一款适合您
分享123个JS特效弹出层,总有一款适合您 123个JS特效弹出层下载链接:https://pan.baidu.com/s/1mH0heedscCrBmft_zOjjwA?pwd=n4eo 提取码: ...
html 字体模糊,详解css3使用transform出现字体模糊的解决办法
这个问题很奇葩,话不多少直接上代码: .g-dialog-wrapper { position: fixed; top: 50%; left: 50%; transform: translate(-5 ...
【position也可以很复杂】当弹出层遇上了鼠标定位（下）
前言接着昨天的内容写,为了保证内容连续性,这里还是把昨天的内容拷了过来. 请用现代浏览器测试引出问题有图有真相,我们来看一个智联招聘里面经常出现的图层: 他这个是没有什么问题的,我们来简单看看其 ...
【position也可以很复杂】当弹出层遇上了鼠标定位（上）
前言周五时同事有一个关于弹出层的问题没有解决,但是面临下班问题,我有点不舒服,便叫回去周六过来解决,但是上周六病了,所以请了个假,于是故事发生啦.... 今天上班时候,组员们卡到了那个地方,然后结果 ...
微信小程序项目实战知识点总结(swiper组件自适应高度，自定义弹出层，悬浮按钮，虚拟键盘)...
1.小程序 swiper 组件默认高度150px,并且如果子元素过高,swiper不会自适应高度 height:100vh; 2.微信小程序自定义弹出层,参考网址:https://blog.cs ...

html弹出层很字体模糊了,由CSS3 transform 字体模糊问题揭示出浏览器渲染机制

html弹出层很字体模糊了,由CSS3 transform 字体模糊问题揭示出浏览器渲染机制相关推荐

最新文章

热门文章