Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

-webkit-transform rotate - Pixelated images in Chrome

Using -webkit-transform: rotate(-5deg); on a container div, Chrome renders the grid of images with really jagged edges. Whereas in FF (-moz-transform:) and IE (-ms-filter:) everything looks OK - see the difference below.

Is there any thing I can do about this?

chromeff

like image 233
davivid Avatar asked Feb 22 '11 12:02

davivid


People also ask

Why are some images pixelated in Chrome?

This can be done by going to Settings within Chrome and typing "hardware" in the search box, then turn off the option to "Use hardware acceleration when available ". Only some computers will experience this issue, and it is advised to turn off hardware acceleration only if you experience issues.

How do I rotate an image in Google Chrome?

How do I rotate an image viewed in Chrome? For example, in ebay. - Google Chrome Community. [CTRL] + arrow. [CTRL] + [Alt] + arrow. [CTRL] + [Shift] + arrow arrow left - counterclock wise arrow right - clockwise arrow up - return to original display arrow down - backward ...

How do I fix pixelated images on Chrome?

Anyone else having this issue on Chrome where images are distorted and pixelated? Try changing the setting on chrome://flags/#use-angle and see if that fixes it. Awesome. That's worked like a charm. That worked, thanks! Damn, this worked like a charm! Thank you!

What is pixelated image-rendering?

Chrome 41 (Beta in January 2015) introduces a new CSS property image-rendering: pixelated ( Spec) that gives you a little more control over how the browser renders a scaled up image.

How do I rotate my screen on Windows 8?

8/8/20. Recommended Answer. Relevant Answer. Chrome doesn't have this feature but your display screen can do this, you can try to rotate your screen with ff. shortcut , [CTRL] + arrow. [CTRL] + [Alt] + arrow. [CTRL] + [Shift] + arrow. arrow left - counterclock wise.


2 Answers

You could check out the answer to the question css transform, jagged edges in chrome

Helped me out

From the accepted answer:

In case anyone's searching for this later on, a nice trick to get rid of those jagged edges on CSS transformations in Chrome is to add the CSS property -webkit-backface-visibility with a value of hidden. In my own tests, this has completely smoothed them out. Hope that helps.

like image 136
Christian Westman Avatar answered Sep 27 '22 22:09

Christian Westman


It appears to be an Antialiasing bug in the webkit engine. A report has been filed but is as yet unsolved.

You can try adding a border the same color as your background to try to minimise the effect.

like image 25
Kyle Avatar answered Sep 27 '22 22:09

Kyle