626724 - CSS border transition has jagged edges upon resize

Status: NEW

(Core :: Graphics: WebRender, defect)

Description

[Sean Martell]

With the current nightly, I notice a new issue when viewing this page:
http://mozilla.seanmartell.com/graphicnovel/

When this page was built, the jagged edges upon resize (black borders) weren't as pronounced and the end-of-animation anti-aliasing jump wasn't as harsh either.

another example found on resizing text can be seen here:
http://people.mozilla.org/~rcampbell/zoom-test.html

Comment 1

[Bas Schouten (:bas.schouten)]

This is due to accelerated layers not doing anti-aliased layer drawing. One thing we could do for the 2D case is create a 1 pixel transparent border around the edges, and let the sampler do the rest.

Comment 2

[Robert O'Callahan (:roc) (email my personal email if necessary)]

We should probably shorten the timeout that makes transform layers inactive. Then the transition would be less obvious.

Comment 3

[Peter Antonius]

Adding a transparent outline will make remove the jagged edges.

Comment 4

[Benoit Girard (:BenWa)]

I don't notice anything obvious in the edges. I do notice the letters jump a bit when the layer becomes inactive.

Bas or roc is there still something here we need to look into?

Comment 5

[Robert O'Callahan (:roc) (email my personal email if necessary)]

I think we should do antialiased layer drawing as some point.

Comment 6

[Gregory Pappas [:gregp]]

Attachment: reduced.html

Comment 7

[Gregory Pappas [:gregp]]

It looks like this might still be a bug? Hard for me to tell if Firefox looks worse than other browsers in this test case.