Twenty Thirteen: pixel shift can occur on gallery post format on non-single views

[lancewillett]

Reported by Mark Jaquith, only seems to happen on non-retina machines with latest Chrome version. Other browsers and retina machines not affected.

Screencast: ​http://screencast.com/t/4USeMoqRQDM2

Test URL: ​http://themebuster.wordpress.net/type/gallery/ — mouse over the peacock and bear images to see them shift slightly left.

Seems to be something with -webkit-transform. Needs investigation.

[jeremyfelt]

Adding -webkit-backface-visibility: hidden; to the .gallery container seems to do the trick. I have no idea what else that might mess with though.

[jeremyfelt]

It seemed more appropriate to put -webkit-backface-visibility: hidden; on the ... .gallery-item .gallery-icon img rules instead. 24310.diff​ takes that approach.

[lancewillett]

Yep, that does the trick. @jeremyfelt would you mind sharing the research and thinking behind the fix? For posterity.

[lancewillett]

Not going to fix yet as it's related to the image sizes in galleries -- "large" size which loads at something like 1024 pixels wide and is trimmed down with CSS to 148 pixels square.

See notes in #24307.

If we load a smaller size (I tested with both "thumbnail" and "medium") the bug reported here does not occur.

[obenland]

Replying to lancewillett:

Not going to fix yet as it's related to the image sizes in galleries -- "large" size which loads at something like 1024 pixels wide and is trimmed down with CSS to 148 pixels square.

We should add Jeremy's fix nonetheless. Even if we'd go the custom-image-size-route, that won't account for galleries that were created prior to switching to Twenty Thirteen.

[lancewillett]

In 24286:

Twenty Thirteen: fix pixel shift that can occur on gallery non-single views in latest Chrome. Props jeremyfelt, fixes #24310.