WordPress.org

Make WordPress Core

#23086 closed defect (bug) (worksforme)

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

Reported by: curiousdannii Owned by:
Milestone: Priority: low
Severity: normal Version:
Component: Bundled Theme Keywords: close
Focuses: Cc:

Description

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.

Attachments (1)

blurry 625px.png (240.1 KB) - added by curiousdannii 16 months ago.

Download all attachments as: .zip

Change History (16)

curiousdannii16 months ago

comment:1 DrewAPicture16 months ago

  • Component changed from General to Bundled Theme
  • Keywords reporter-feedback added

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?

comment:2 alexvorn216 months ago

  • Keywords close added

comment:3 ocean9016 months ago

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.

comment:4 curiousdannii16 months ago

  • Keywords reporter-feedback close removed

@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.

comment:5 nacin16 months ago

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.

comment:6 curiousdannii16 months ago

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

comment:7 lancewillett16 months ago

  • Cc drewstrojny added
  • Keywords close added
  • Milestone changed from Awaiting Review to 3.6
  • Priority changed from normal to low
  • Summary changed from Twenty Twelve -- full width images are blurry in Chrome to Twenty Twelve: text in a full-width image can be blurry in Webkit

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:

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.

comment:8 follow-up: paulwp16 months ago

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.

comment:9 follow-up: curiousdannii16 months ago

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.

comment:10 in reply to: ↑ 9 paulwp16 months ago

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.


Last edited 16 months ago by paulwp (previous) (diff)

comment:11 in reply to: ↑ 8 ; follow-up: SergeyBiryukov16 months ago

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.

comment:12 in reply to: ↑ 11 ; follow-up: paulwp16 months ago

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. )

comment:13 in reply to: ↑ 12 SergeyBiryukov16 months ago

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.

comment:14 obenland13 months ago

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

comment:15 lancewillett13 months ago

  • Milestone 3.6 deleted
  • Resolution set to worksforme
  • Status changed from new to closed

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

Note: See TracTickets for help on using tickets.