WordPress.org

Make WordPress Core

Opened 18 months ago

Closed 4 months ago

#26584 closed defect (bug) (fixed)

Theme screenshot thumbnails rendered crisp in theme browser

Reported by: ericlewis Owned by: SergeyBiryukov
Milestone: 4.2 Priority: normal
Severity: normal Version: 3.8
Component: Themes Keywords: good-first-bug has-patch
Focuses: ui Cc:

Description

The anti-aliasing on these looks off, at least in Chrome 31.

The -webkit-transform property seems to be the culprit here in wp-admin.css...

.theme-browser .theme .theme-screenshot img {
	height: auto;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	-webkit-transform: translateZ( 0 ); /* Prevents rendering bugs in Chrome */
	-webkit-transition: opacity 0.2s ease-in-out;
	transition:         opacity 0.2s ease-in-out;
}

but given the comment there seems to be something else afoot.

Attachments (2)

Screen Shot 2013-12-12 at 4.38.39 PM.png (227.6 KB) - added by ericlewis 18 months ago.
26584.diff (464 bytes) - added by mzak 4 months ago.
Removed webkit-transform from line 155

Download all attachments as: .zip

Change History (11)

comment:1 @SergeyBiryukov18 months ago

  • Version changed from trunk to 3.8

comment:2 @SergeyBiryukov18 months ago

  • Keywords ui-focus added

comment:3 @Clorith17 months ago

I think this is just relevant to the viewport, I was looking into the same today and see that at the "right" sizes the screenshots are nice and crisp, but if I move above/below them they look rather bad until I hit a new "right" size again.

Same behavior in IE11 and chrome 31 here.

comment:4 @obenland5 months ago

  • Keywords dev-feedback added
  • Milestone changed from Awaiting Review to 4.2

Let's make a decision on this in 4.2. I pinged matveb and shaunandrews to get their feedback on it too.

It was first introduced in https://plugins.trac.wordpress.org/changeset/786480 to fix a "flicker of the screenshot on hover", but I can't reproduce that without it.

Last edited 5 months ago by obenland (previous) (diff)

comment:5 @obenland4 months ago

  • Keywords needs-patch good-first-bug added; dev-feedback removed

Shaun got back to me:

I don't recall the exact problem (since I was the one who added it over a year ago), but usually the flicker is more prevalent in slow/old hardware. However, since its seems to be just the opacity that's changing, it may not be needed.

Let's remove it then.

@mzak4 months ago

Removed webkit-transform from line 155

comment:6 @mzak4 months ago

  • Keywords has-patch added; needs-patch removed

comment:7 @slackbot4 months ago

This ticket was mentioned in Slack in #core by mikehansenme. View the logs.

comment:8 @SergeyBiryukov4 months ago

The "Prevents rendering bugs in Chrome" comment was initially introduced in [26142] and duplicated in [27174], apparently accidentally.

comment:9 @SergeyBiryukov4 months ago

  • Owner set to SergeyBiryukov
  • Resolution set to fixed
  • Status changed from new to closed

In 31316:

Themes: Remove a Chrome workaround that causes theme screenshots to look too crisp and no longer appears to be relevant.

props mzak.
fixes #26584.

Note: See TracTickets for help on using tickets.