Twenty Twelve: text in a full-width image can be blurry in Webkit

[curiousdannii]

Twenty Twelve sets the .site-content width to 65.104166667%; While this is clearly meant to be 625px, in Chrome 23 it comes instead to 624px, meaning that full width images are blurry.

The attached image shows this - the top is true 625px, the bottom is what the 65..% does. The break is in the middle of the fourth line of text, just to make it most obvious.

[DrewAPicture]

In this context, the .site-content container is doing its job scaling the image. The full-width image width is defined in the $content_width global which defaults to 625.

So are you saying the scaled-down image is blurry?

[ocean90]

I think this has something to do with how Chrome/Webkit calculates width and height in percent. For example in Firefox the width is 624.983px. ​So Sub-Pixels are needed.

Firefox has an algorithm for rounding. Webkit just rounds down as far as I know.

[curiousdannii]

@DrewAPicture, no I'm saying that a 625 wide image, which should not be scaled, is being scaled to 624 pixels, and is blurry.

Personally I think using 65.104166667% is a joke, but if you must use such a percentage, then it should be increased so that Chrome will round down to 625.

[nacin]

It should be noted that these are not random decimals, but are based on the use of root em (rem) units: ​http://core.trac.wordpress.org/browser/tags/3.5/wp-content/themes/twentytwelve/style.css#L17.

[curiousdannii]

That's all well and good, but Chrome displays 624.9833374023438px as 624px.

[lancewillett]

This could be something we wait and see on, from a small bit of research I've done looks like Webkit could be working towards subpixel rendering soon.

Some possibly related links:

• ​https://bugs.webkit.org/show_bug.cgi?id=60318
• ​http://trac.webkit.org/changeset/116009
• ​http://bricss.net/post/22718920352/subpixel-layout-coming-to-webkit?04dcb328

Noting for accuracy of the bug report that this doesn't affect user experience unless the image has textual information (like a banner ad or something). I updated the ticket title to reflect this. Images without text are not blurry — they are just one pixel smaller and look fine.

I'm going to suggest we keep it open and do some more research, then make a decision based on the Webkit roadmap.

[paulwp]

1px off will not ruin photo, but for an image that is designed to be a logo ( or anything with line, curve ) 1px off will blur it out. Of course, this's not the theme's bug, it's how browsers calculate and render.

Meanwhile, folks who want to use image with text or image that functions like logo should avoid this issue by styling it seperately with exact px in different breakpoints. In other word, do not let it resize based on %.

Also FWIW
​http://alastairc.ac/2012/04/relative-pixels/

I did try remove all rem references from Twenty Twelve ( the px fallback for IE now become for all ) the theme functions the same (well at least to me) without rem, so I don't see the benefit of rem at this point. But I'm a bit sad that I can't do that in real because it will be hard to keep track of changes in Twenty Twelve updates.

[curiousdannii]

It affects far more than just text and logos -- any full width image will be blurry. Facial details will be lost in portraits, other details will be lost in other images.

@paulwp, I'm not sure that styling the image with the width at 625px will help -- as far as I know that's what the wordpress editor will do for images, but the .site-content width will override it.

[paulwp]

Replying to curiousdannii:

It affects far more [...], but the .site-content width will override it.

Actually you're right.

Also I've just discovered that Twenty Twelve kinda knows this issue, it manages to crop feature image with 624px as oppose to 625px

See this

​http://core.trac.wordpress.org/browser/tags/3.5/wp-content/themes/twentytwelve/functions.php#L76

Which means, soon after webkit fix its bug on rounding and rendering, people who've been using Twenty Twelve theme will have forward compatibility problem, they will have to run the script to make their already uploaded images become 1px wider.

[SergeyBiryukov]

Replying to paulwp:

But I'm a bit sad that I can't do that in real because it will be hard to keep track of changes in Twenty Twelve updates.

That's what child themes are for: ​http://codex.wordpress.org/Child_Themes.

[paulwp]

Replying to SergeyBiryukov:

Replying to paulwp:

That's what child themes are for: ​http://codex.wordpress.org/Child_Themes.

Actually, I was talking about Child theme.

The CSS in child should use @import url(../twentytwelve/style.css); and only override what needed, this way, there will be no worry or burden whatsoever when Parent's CSS is updated.

But to not use rem part of TwentyTwelve, Child's CSS is a copy over Parent's CSS without rem bits, no use of @import part. This, when CSS part of the parent is updated ( more likely to be bug fix, like some adjustments here and there ) there will be more job to do, the diff-compare-merge or the removal of rem bits over again each time.

This's what make me sad ( not very sad, though, just a bit. )

[SergeyBiryukov]

Replying to paulwp:

But to not use rem part of TwentyTwelve, Child's CSS is a copy over Parent's CSS without rem bits, no use of @import part.

I see, thanks for the clarification.

[obenland]

Is Chrome smarter about this now? I have a hard time reproducing the issue with Chrome 25 (meaning: I cain't reproduce it).

[lancewillett]

I can't reproduce, either. Closing as "worksforme" -- curiousdannii, please let us know if you get a chance to test again and confirm.