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%);
Related
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%)
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 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 have a nice background on my page, and I want my text header to act as a mask to cut through its containing div and have the background as a texture.
Can I do this in CSS or do I have to open up Photoshop?
Limited browser support, but background-clip can get you this effect: http://tympanus.net/Tutorials/ExperimentsBackgroundClipText/ (Hit the Animate buttons for more fun)
Using SVG you can do it like this: http://people.opera.com/dstorey/images/newyorkmaskexample.svg (View source to see what is actually done, see reference article too)
Using a background image and then CSS, you could do this: http://www.netmagazine.com/tutorials/texturise-web-type-css
As CSS-Tricks shows in this article, 'image behind text' can be done as such:
h1 {
color: white; /* Fallback: assume this color ON TOP of image */
background: url(images/fire.jpg) no-repeat; /* Set the backround image */
-webkit-background-clip: text; /* clip the background to the text inside the tag*/
-webkit-text-fill-color: transparent; /* make the text transparent so
* the background shows through*/
}
But it isn't guaranteed to work on all browsers, so they suggest a few work arounds, like modernizr.
Here's what it looks like when it works:
There is a background-clip: text property in CSS3, although it doesn't work in every browser. See here for more details.
To extend #sgress454's answer. Nowadays, background-clip: text works in Firefox and Edge, but its browser compatibility is still not full. Safari does not and Chrome partially (It is supported with the prefixed version of the property only. According to the WebKit blog, text decorations or shadows are not included in the clipping.). background-clip: text is still what you are looking for:
background-clip: text;
The background is painted within (clipped to) the foreground text.
MDN
Demo:
body {background: black;}
div {
background: url(https://images.unsplash.com/photo-1543005472-1b1d37fa4eae?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60), black;
background-clip: text;
color: transparent;
}
<div>This background clips to the text.</div>
When I use SVG in background property like this:
.svg-button {
-webkit-transform: scale(3.0) // root of the problem!
background: url(Button.svg) no-repeat;
width: 32px;
height: 32px;
}
I get blurred image as result. At the same time text in tag with this style is clear. Also if I scale page by using CTRL++ (browser zoom) instead transform property everything is clear.
If I replace CSS background property on:
<object type="image/svg+xml" data="Button.svg" width="32" height="32"></object>
the image is clear in any scale in any case.
Where is the problem?
Sample on jsfiddle
Update:
I found some more information about this problem:
StackOverflow question
Bug ticket for Chrome (I tried my test under Safari/Chrome/IE9/10 and behaviour is the same.
I was "playing" with this a while back and noticed this for fonts too. Although it seems to be fixed now (for the fonts at least).
As far as I understand the inner workings, the contents of the scaled element are mapped to a texture, which in turn is scaled.
As a workaround, try using a 3d translation and move the element on the z-axis to achieve the size change. This won't yield as much control over the final outcome though.
.svg-button {
-webkit-transform: perspective(800px) translateZ(-300px);
background: url(Button.svg) no-repeat;
width: 32px;
height: 32px;
}
For Chrome/Safari IE9/10 I have decided to use CSS zoom property instead scale property.
.svg-button {
zoom: 300%;
background: url(Button.svg) no-repeat;
width: 32px;
height: 32px;
}
For Firefox I still use CSS scale property because Firefox doesn't support zoom property. At the same time Firefox scales SVG background well. See result.
For IE9 I have written javascript which temporary modifies CSS width property and after small delay returns it back. In this way I force redraw CSS background.