CODEWITHSUNDEEP
htmlcsswebkit
user1080806
user1080806

Reputation:

Why is WebKit not redrawing this text properly?

I've got a pretty specific issue with the WebKit renderer. When a text node has a descender or ascender that extends beyond the selection box of the text node, and that text node changes position, WebKit doesn't repaint the right region.

I've made an example with Open Sans.

In Chrome on Windows 7, the descender on the J gets cut off during the animation. I can fix it by adding a margin to the text node, but that's a bit of a hack and it screws with layout. Does anyone see this in other browsers? Why is it happening?

Upvotes: 2

Views: 163

Answers (2)

methodofaction
methodofaction

Reputation: 72405

This looks like a bug in Webkit. You need to let Webkit know that there's painted pixels beyond its bounding box, which you can do in a couple of ways, but here are two that I've found with some quick testing: 

#expand {
    height: 0px;
    box-shadow: 0 0 0 5px rgba(0,0,0,0);
}

#expand {
    height: 0px;
    outline: solid transparent 5px;
}

I'm guessing outline has better performance.

It seems to work if you add it #expand or p as well. There's some flags in Chrome which you can enable to see how redraw regions work, but I don't have them handy right now.

Upvotes: 0

Rchristiani
Rchristiani

Reputation: 444

I threw a padding-left: 5px; on the #container p rule, the J was outside the box.

Hope that helps.

*edit I miss read, not sure if the padding thing would also mess with your layout, I assume so.

Upvotes: 1

Related Questions