New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 36902 link

Starred by 57 users

Issue metadata

Status: Fixed
Owner:
Closed: Aug 2011
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 2
Type: Bug

Restricted
  • Only users with EditIssue permission may comment.



Sign in to add a comment

Anti-aliasing failure when apply CSS style -webkit-transform: rotate(); on an image

Reported by sun.fi...@gmail.com, Feb 26 2010

Issue description

Chrome Version       : all
URLs (if applicable) :
Other browsers tested:
     Safari 4: OK
  Firefox 3.x: OK (-moz-transition)
         IE 7: n/a
         IE 8: n/a

What steps will reproduce the problem?

apply CSS style -webkit-transform: rotate(); on an image.

What is the expected result?

the edge of image should be anti-aliased.

What happens instead?

rendering failed on the edge of image.
safari OK
chrome mac OK
chrome win FAIL
chrome ubuntu FAIL
firefox mac OK
firefox win OK
firefox ubuntu FAIL

 
The new CSS3 transform feature is great for rotating images but in Chrome 4.1.249 on 
Windows the edge of the image is indeed not antialiased and has an ugly chopped edge.  
I was testing on this link: http://css-tricks.com/examples/CSS3PhotoGallery/  
Chrome_css_bug_2010-05-17_1531.png
211 KB View Download

Comment 2 by kuv...@gmail.com, May 19 2010

I reported same problem in  Issue 35529 , so these bugs should be merged into one.

And is it possible to get response from Chromium engineers about this? These bugs
were filled 3 months ago and since then nobody has cared about it.

Comment 3 by kuv...@gmail.com, May 28 2010

I've filled bug in WebKit for this: https://bugs.webkit.org/show_bug.cgi?id=39753
I described there how to fix it in WebKit code, so if that change is OK, would
someone with WebKit toolchain make the patch?

Comment 4 by deanm@chromium.org, Jun 29 2010

Status: Available

Comment 5 by deanm@chromium.org, Jun 29 2010

Another example of this are the employee images on:

http://analog.coop/#is

You can really see the stepping on the aliased edges.

Comment 7 by clemw@chromium.org, Jan 12 2011

Labels: -Area-Undefined Area-WebKit

Comment 8 by jam...@chromium.org, Jan 13 2011

Looks like the inside edge of the border is antialiased but the outside edge of the image has a sharp edge (1-bit clip).  This is a skia bug.

Comment 9 by reed@google.com, Jan 13 2011

It appears from https://bugs.webkit.org/show_bug.cgi?id=39753 that this is not a skia bug, but rather ImageSkia.cpp has decided to not enable antialiasing in its paint. If that were enabled, then it would look smooth, and run slightly slower.

Comment 10 by karen@chromium.org, Jan 18 2011

Labels: Mstone-10

Comment 11 by k...@google.com, Jan 27 2011

Labels: -Mstone-10 Mstone-11 MovedFrom-10
Move to M11 from M10, as we've now branched.  If you believe this bug was moved in error, please come talk to me.

Comment 12 by Deleted ...@, Feb 17 2011

This seems to affect alpha inside images too.

Note the transition in the middle of the image file from shadow to white fill is aliased, but the straight line inside the inner JPG is smooth:

http://matthewrconsultancy.co.uk/start

The rotated elements are img blocks inside div blocks. The div blocks have a background image with shadow and a white box inside. The JPEG's have a white outline to try and minimise the effect of this bug on the website in question and are positioned centrally inside the div blocks.

Comment 13 by clemw@chromium.org, Feb 18 2011

Labels: ConOps

Comment 14 by reed@google.com, Feb 18 2011

The patch in https://bugs.webkit.org/show_bug.cgi?id=39753 fixes both http://css-tricks.com/examples/CSS3PhotoGallery/  and http://matthewrconsultancy.co.uk/start. Sorry to come late to the discussion. Are we OK with that patch?

Comment 15 by karen@chromium.org, Feb 23 2011

Status: Untriaged

Comment 16 by reed@google.com, Feb 24 2011

Status: Started
Waiting for decision on existing patch https://bugs.webkit.org/show_bug.cgi?id=39753

Comment 17 by kareng@google.com, Mar 9 2011

Labels: -Mstone-11 MovedFrom-11 Mstone-12
rolling non releaseblocker mstone 11 bugs to mstone 12. 
Labels: -ConOps Hotlist-ConOps

Comment 19 by clemw@chromium.org, Apr 12 2011

Cc: vangelis...@gtempaccount.com
This is also going to be an issue when accelerated compositing is enabled due to  issue 51839 : http://code.google.com/p/chromium/issues/detail?id=51839

Comment 21 by reed@google.com, Apr 12 2011

We have a fix for this (someone already posted the fix as a webkit
patch). If we want antialiasing, we can have it. I think we just have
to decide to enable this.

See https://bugs.webkit.org/show_bug.cgi?id=39753

Comment 22 by k...@google.com, Apr 25 2011

Labels: Mstone13 MovedFrom12
Moving out of M12.

Comment 23 by k...@google.com, Apr 25 2011

Labels: -Mstone-12 Mstone-13
Moving out of M12.

Comment 24 by Deleted ...@, Apr 28 2011

Seeing this issue too. I'm rotating thousands of images on one page and performance has been great. Is there a possibility anti aliasing may decrease performance?

Comment 25 by Deleted ...@, Apr 28 2011

Just to point out in case it had gone un-noticed, the issue has gotten worse in the latest canary build at the moment (13.0.750.0).

Borders of rotated elements are now displaying aliasing where as they aren't in the stable version (11.0.696.60) at time of writing.
 Issue 35529  has been merged into this issue.

Comment 27 by e...@chromium.org, May 31 2011

Cc: e...@chromium.org
Labels: -Mstone-13 Mstone-14 MovedFrom13
Moving !type=meta|regression and !releaseblocker to next mstone
Labels: -MovedFrom12 MovedFrom-12

Comment 30 by k...@google.com, Jul 28 2011

Labels: -Mstone-14 Mstone-15 MovedFrom-14
Punting out non-critical bugs.  Please move back to 14 if you believe this was done in error.
Also reporting the same issue...

This actually makes css3 rotation unusable right now in my opinion, as the resulting jagged edges are too ugly to use at all...
See the barker images at the bottom of http://www.redroof.com/

It's (pardon my French) Jag City down there.  Red Roof Inn is a brand with a fair amount of exposure; I'm sure Chrome users would appreciate it not looking... well, like that.

I do not personally deem this the highest priority as a user and an author, but it isn't trivial by any means.
jag-city.png
80.7 KB View Download
FWIW, this is also an issue in Safari 5.1.

Comment 34 by Deleted ...@, Aug 22 2011

I can report that I'm experiencing the same jagged edges in Win7/Chrome v13.0.782.112

Contrary to comment #33, edges are smoothly anti-aliased for me in Safari 5.1 on OS X 10.6.8. Perhaps you are referring to Safari on Windows? I don't have it installed on my Win7 VM to test.

Comment 35 by tony@chromium.org, Aug 22 2011

 Issue 45861  has been merged into this issue.
Safari 5.1/Mac has the same problem in my example (comment #32: http://code.google.com/p/chromium/issues/detail?id=36902#c32)

Comment 37 by sobi...@gmail.com, Aug 26 2011

same problem ubuntu 11.04 / chrome 13.0.782.112
aa-error.jpg
64.3 KB View Download
This is pretty ridiculous.  Most web developers are avid Chrome fans and suggest it to their peers and clients.  But I haven't used CSS transform rotates on anything with images in any of my designs out the lack of support on Windows' hottest browser.  Someone's already supplied a suggested patch (https://bugs.webkit.org/show_bug.cgi?id=39753).

We tout Chrome for it's outstanding CSS support and it's the development community that is really behind it, can this be moved to the next release?
Add a 1px white border around you images and it will render nicely :)
@Commenter 39-  I tried that on this page: http://css-tricks.com/examples/CSS3PhotoGallery/ and no dice.  Adding the border to either the IMG tag or the containing anchor element does not improve the jagged edges.   This should work natively... since when do we have to hack for Chrome?
Chris, the images look perfectly fine for me (Chrome 13, Snow Leopard).

My use-case is still crrrazy, though: http://code.google.com/p/chromium/issues/detail?id=36902#c32
Sorry... the original bug still says it's all versions of Chrome but it's really Chrome for Win and some people are reporting that Linux also has the issue (comment 37 above).

I tested it in Chrome Canary Build v15.xxx for Windows and I get the jagged edges.  Also tested in stable Chrome 13.xxx for Win and same problem.  It shouldn't be happening on Mac.  In Safari 5.0.3 for Windows anti-aliasing is working as expected.

From what I gather i

Comment 44 by reed@google.com, Aug 31 2011

Status: Fixed
Committed r94185: <http://trac.webkit.org/changeset/94185>

Just need chrome to roll up to this rev. of webkit
Great news. Can't wait for Chrome to fold the update in.  For the time being, developers who want to use rotate on images and not see the jag city, simply apply the following CSS to the element being rotated:

-webkit-backface-visibility: hidden;

This seems to trigger the antialiasing in Webkit and will at least get redroof.com looking good in Chrome for Windows.
Whoa, Chris, that works.  Amazing.

The latest Webkit nightly isn't posted yet, and I don't have a build process setup, but here's hoping it fixes the issue without hacking.
Still an issue, even for simple boxes. Chrome on Ubuntu.
The "backface" workaround is a life-saver, thanks!!
what version are you running? this is fixed in 15.0.874.7 canary
Mine is 14.0.835.157 beta on Ubuntu. Don't have the v15 update yet. Thanks for clarifying.

Comment 50 by Deleted ...@, Oct 14 2011

Please, fix it. :)

Comment 51 by Deleted ...@, Nov 16 2011

This is still not fixed in latest chrome on winxp. Worse, the -webkit-backface-visibility: hidden; hack has stopped working in the same version on winxp, so now there is no longer a workaround.

How can this bug still be around after this long?

Comment 52 by reed@google.com, Nov 16 2011

http://css-tricks.com/examples/CSS3PhotoGallery/  looks antialiased for me in M15 and M17 (canary) on XP and Win7. What version, or what URL, is failing for you?
@51 - Can you verify what version of Chrome you have?  This should be fixed as of v15.  Since you also are seeing the backface-visibility not working, please make sure you have a current version of Chrome. It's possible your Chrome is older than you think and the backface-visibility wasn't implemented yet or you are applying the style definition on the wrong element.  This should be fixed.
I'd like to make a small clarification and point out that backface-visibility in particular does not fix this issue, but any technique that sends the element through the GPU.

So, if you use "rotate(Xdeg) translateZ(0);" instead of just "rotate(Xdeg);", that will antialias the image as a matter of course.

Comment 55 by m...@dthought.net, May 25 2012

Using Chrome beta 20, and CSS transforms still result in jagged edges on both Windows (using a discrete nVidia GPU) and OS X (using an on-board GPU).

The problem is if you use any of the compositing tricks like translateZ(0) or backface-visiblity: hidden, then any text becomes composited too and looks awful. See screenshot.

Firefox does a better job; it's not a perfect antialias, but it's certainly not jagged. I feel there's room to reach a bit of middle ground here.
webkit-css-transform-jaggies.jpg
41.4 KB View Download

Comment 56 Deleted

Chrome Team has been very resistant to fixing the Crappy Text problem:

http://code.google.com/p/chromium/issues/detail?id=92055

I wouldn't hope for a miracle any time soon.
Still seeing issue on Mountain Lion 10.8 / 21.0.1180.75 (Official Build 150248)
Screen Shot 2012-08-11 at 1.40.17 PM.png
96.6 KB View Download
Same here on windows 7 with chrome 21.0.1180.83 m stable. Text especially looks awful and I don't think that this is tied to just images.
Project Member

Comment 60 by bugdroid1@chromium.org, Oct 13 2012

Labels: Restrict-AddIssueComment-Commit
This issue has been closed for some time. No one will pay attention to new comments.
If you are seeing this bug or have new data, please click New Issue to start a new bug.
Project Member

Comment 61 by bugdroid1@chromium.org, Mar 10 2013

Labels: -Area-WebKit -Mstone-15 Cr-Content M-15
Project Member

Comment 62 by bugdroid1@chromium.org, Mar 13 2013

Labels: -Restrict-AddIssueComment-Commit Restrict-AddIssueComment-EditIssue
Project Member

Comment 63 by bugdroid1@chromium.org, Apr 6 2013

Labels: -Cr-Content Cr-Blink

Sign in to add a comment