I have a problem with blurry images on my site. I found a few solutions, but only
img{
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
worked for me.
When I apply this css all images are shown nice, but the problem is that then all text becomes blurry.
Is there any way to avoid that?
In order to stop your images from being blurry; make sure they are of a high resolution, if you are using low res images they will display blurry on your webpage, also make sure you are not declaring a width and height that is causing them to be blurry. In order to display smoother/less blurry font in the browser try the following;
-webkit-font-smoothing: antialiased; //webkit browsers
-moz-osx-font-smoothing: grayscale; //firefox/opera
text-rendering: optimizeLegibility; //all other browsers
Try also using transform: translateY(-51%)
Related
I've done this in CSS.
It works great in Google Chrome after adding:
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
But in FireFox it looks like this:
See source here
I tried several things and searched a lot. I don't know what to do to get rid of those borders FireFox creates. Most stuff I find is about transition, which I don't use. Any ideas would be very much welcome.
References:
- CSS3 transform rotate causing 1px shift in Chrome
- -webkit-transform rotate - Pixelated images in Chrome
- CSS transition effect makes image blurry / moves image 1px, in Chrome?
Adding translateZ(1px) before the rotation rule seems to remove those artifacts:
transform: translateZ(1px) rotate(-45deg);
See this question.
I have created a hexagon using CSS, the hexagon has a rollover state, with text in it, which always appears blurry in chrome, but looks fine in IE11, IE Edge and FF.
Due to the hexagon being made from CSS, I can't remove the rotation on the elements, so I need another way to fix the text being blurry?
I have an example here, I've also tried using the following CSS attributes but none of them seem to stop the text being fuzzy:
https://jsfiddle.net/zg0eprmu/8/
-webkit-filter: blur;
-webkit-font-smoothing: antialiased;
will-change: transform;
-webkit-perspective: 1000px;
backface-visibility: hidden;
transform-origin(50% 51%);
I have a problem with some css code.
I build a hover with a image inside that scales. In every browser it seems okey except Safari.
I used this code to fix the problem, did not work.
transform: translate3D(0,0,0);
-webkit-font-smoothing: antialiased;
backface-visibility: hidden;
The complete code you can find here.
Jsfiddle
I think it is some kind of antialiased problem, but i have no idea how to fix it :(
Try adding a perspective of 1px to your scale transforms, i.e.:
transform: perspective(1px) scale(1.2);
This can fix common cross-browser problems similar to what you are describing. See also: http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/
[SOLVED]
I just fixed the problem thnx to bwright.
I added
-webkit-backface-visibility: hidden;
to the wrap img
and
transform: perspective(1px) scale(1.2) ;
To the wrap:hover img
It fixed the problem and now its smooth in safari.
I have a div with a background image that I am rotating. Below is my css rules to rotate it:
#services_parallax {
-webkit-transform:rotate(3.1deg); /* Webkit */
transform: rotate(3.1deg); /* firefox & IE9+ */
/* IE7 & 8 */ filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.998537, M12=-0.054079, M21=0.054079, M22=0.998537, sizingMethod='auto expand');
}
The problem is in IE the edges of the image are very blocky and jagged instead of being smooth lines and don't appear to be antialiased. Does anyone know a fix for this? It was doing it in chrome until I applied the fix for it by applying -webkit-backface-visibility: hidden; which worked great for chrome, I just need a similar fix for IE if one exists.
To replicate this issue paste the following into an HTML file and look at it in IE:
<style type="text/css">
#services_parallax { -webkit-transform:rotate(3.1deg); /* Webkit */
transform: rotate(3.1deg); /* firefox & IE9+ */
/* IE7 & 8 */ filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.998537, M12=-0.054079, M21=0.054079, M22=0.998537, sizingMethod='auto expand');
background: url(http://img.netcarshow.com/Pagani-Zonda_R_2009_1600x1200_wallpaper_01.jpg) center center;
background-size:100% auto;
height:100px;
width:700px;
margin-top:50px;
margin-left:50px;
}
</style>
<div id="services_parallax"></div>
Anti-aliasing don't work on large images if there are height and width forced with CSS (IE11, 10 and 9). I've make some (very) approximate tests and I deduct anti-aliasing works under 1000px.
I'm still looking for an official source for this issue.
#geoffs3310, I feel your pain.
I have found this is still an issue with IE11, and some other browsers (Safari on iPad and on Chrome and the default browser on Samsung Galaxy Tab A). To work around this I whacked a dark background-color on the element containing the background-image. I don't know why, but it appears to do the trick, e.g.
background-color: black;
And in case anyone else reads this post, allow me to put forward a few other fixes I found in dealing with the various issues arising from skewing content. Note, these are all applied to the transformed container element.
Eliminates the jagginess buttons get after skew rotations are applied (kudos):
transform-style: preserve-3d;
Eliminate blurry where <canvas> has been used (kudos to Zoltan). Note, if there are other transforms on the element declare them on separate lines rather than shorthand (from memory this was to work around a similar Safari issue):
transform: perspective(0);
And another fix—though my documentation lacks what it fixes, I think it was to do with janky or blurry content in IE—try:
outline: 1px solid transparent;
To get round this issue i used box shadows which seemed to work and make the edges smooth
I noticed that when using position: fixed on an element, the text on the iPad (iOS 5.0.1) is being rendered better than without position: fixed. This is especially the case for white text on darker background.
My question is how to make use of this improved anti-aliasing without using workarounds such as position: fixed.
Below you can find an example picture and the corresponding code.
http://jsfiddle.net/t4kTm/
I don't know why that is, but I do know how to control anti aliasing in webkit browsers:
-webkit-font-smoothing: none; /* Obvious */
-webkit-font-smoothing: subpixel-antialiased; /* This is what quite a few browers already do*/
-webkit-font-smoothing: antialiased; /* Even more than the one above */
Will this help?
After updating to iOS 5 I wasn't able to reproduce this anymore - weird.
On the iPad, applying position:fixed to the body tag makes the font thinner for all child elements (appearance similar to -webkit-font-smoothing: antialiased). I haven't tested exhaustively, but it works with Helvetica Neue in iOS 5.1.1
body {
-webkit-font-smoothing: antialiased; // make fonts thinner in desktop Webkit
position: fixed; // make fonts thinner on the iPad
}