transform:rotate在手机上显示有锯齿的解决方案
transform:rotate 属于简单好用的效果,但在手机上显示时,会有比较明显锯齿。
解决方案也很简单, 利用外层容器的overflow:hidden 加上图片margin:-1px 就可以解决。
原理没去深究,理论上是矢量跟位图的处理不一样,这个方案也有个小问题 就是图片变小了 ^_^ 可以用手机看看demo http://labs.aoao.org.cn/demo/transform-rotate/
update: 大家反应这方案在电脑上反而会出问题。
我测试了个新的方案rotate3d + border:1px solid transparent;,问题也算是解决了。
同时发现另一个小问题,缩放的图片使用rotate3d 在非retina 屏下图片会变模糊了点点(属于不对比不发现的),而用rotate就没这问题,这个问题在old iPad 发现。
同时又发现另另一个小问题,iOS 4.x上的 想要平滑,缩放图片哪种都会变模糊了点点(同样属于不对比不发现的),这个问题在old old iPhone 发现的。
当然,本来缩放图片是件不好的事,可是缩放图片在这里是故意的,大家选适合的方案在对应的场景使用吧,原本方案就没想着要在电脑上的浏览器上使用的
transform:rotate在手机上显示有锯齿的解决方案的更多相关文章
- transform:rotate在手机上显示有锯齿的解决方案大全
先来个兼容性说明,洗洗脑: div{transform:rotate(7deg);-ms-transform:rotate(7deg); /* IE 9 */-moz-transform:rotate ...
- 如何正确地在手机上显示图片——QImage与QPixmap完全解析
引言 用Qt程序在手机上显示一幅图片对编程人员来说是再基础不过的一件事情了.那么先让大家看两段代码: //dangerous should not be used, cannot display ea ...
- Ionic生成的App安装在手机上后无法联网的解决方案
在Ionic中使用inappbrowser.themeablebrowser 组件打开网页,刚开始是好的,后来不知添加什么插件,导致了安装在手机上以后没有网络访问权限. 尝试了很多,最后才发现,此时, ...
- Android 代码中文字在手机上显示乱码问题解决方法
在学习Android过程中,用于测试时发现,代码中的中文在真机上会显示乱码, 网上查阅了些资料,参考如下: http://www.androidchina.net/3024.html http://b ...
- .Net语言 APP开发平台——Smobiler学习日志:如何在手机上显示类似EXCEL表格
最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便 样式一 一.目标样式 我们要实现上图中的效果,需要如下的操作: 1.从工具栏上的&qu ...
- Web页面在手机上显示过大问题
网上抄来了,自己也备忘下:增加<meta name="viewport" content="width=device-width, initial-scale=1. ...
- 第十二篇 -- 关于U盘制作启动盘后在本机上显示不出来的解决方案
喜欢玩电脑的朋友应该都重装过系统,最常用的就是用U盘装系统.以前装系统都没问题,不过偶然一次发现了一个问题,就是那个被制作成启动盘的U盘,插在本机上只能显示EFI启动文件部分,而其他空间全都显示不出来 ...
- InteractiveHtmlBom 在手机上无法显示 BOM List 和装配图的问题
InteractiveHtmlBom 在手机上无法显示 BOM List 和装配图的问题 InteractiveHtmlBom 插件是一款用于 KiCad BOM 装配图生成插件. 最近新生成的 文件 ...
- 如何在手机上实现 H5 页面全屏显示
如何在手机上实现 H5 页面全屏显示 fullscreen 隐藏头部地址栏 隐藏底部导航栏 refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才 ...
随机推荐
- 小梅哥FPGA数字逻辑设计教程——基于线性序列机的TLC5620型DAC驱动设计
基于线性序列机的TLC5620型DAC驱动设计 目录 TLC5620型DAC芯片概述: 2 TLC5620型DAC芯片引脚说明: 2 TLC5620型DAC芯片详细介绍: 3 TLC ...
- Entity Framework 第十篇 条件查询
业务类中 我们根据条件来动态的查询 创建IQueryable接口 public IQueryable<TEntity> GetQueryable() { IQueryable<TEn ...
- 【Tarjan】+【SPFA】APIO2009 Atm
一.算法介绍 tarjan——求解有向图强连通分量.这个算法在本人的一篇blog中有介绍,这里就不赘述了.贴上介绍tarjan的的blog链接:http://www.cnblogs.com/Maki- ...
- VirtualProvider (VirtualCube)虚拟立方体
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- Ajax全接触
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML) 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不 ...
- 《BI项目笔记》历年感官评吸质量均值变化分析Cube的建立
分析主题主要维度:烟叶级别.烟叶级别按等级信息.烟叶级别按分级标准(标准维度)产地(父子维度)检测时间(时间维度,以Tqc_Raw_SmokingTest .CheckTime字段派生CheckDat ...
- <a>每次点击都会让浏览器重新打开一个窗口问题
<a> 标签的 target 属性规定在何处打开链接文档.如果在一个 <a> 标签内包含一个 target 属性,浏览器将会载入和显示用这个标签的 href 属性命名的.名称与 ...
- C# Windows service 开发笔录
本文将详细图解,开发Windows service的过程. 功能:数据库查询数据后,经过处理,每天定时发送邮件. 一.WinForm调试 1.新建Windows service项目 2.新建WinFo ...
- 【安全测试】 WebScarab安装方法
Webscarab同样需要java环境,下载j2_webscarab-installer.jar包. 1.进入cmd,执行java -jar j2_webscarab-installer.jar命令( ...
- Selenium 获取隐藏元素的内容
第一种 先获取元素通过 属性获取 WebElement webElemt= webElement.findElement(By.xpath("//*[@class='xxxxxx]/a&qu ...