Making WordPress.org

Opened 5 years ago

Closed 5 years ago

Last modified 5 years ago

#2322 closed defect (fixed)

Firefox shows low-res banner on retina display

Reported by: jsmoriss Owned by: tellyworth
Milestone: Plugin Directory v3.0 Priority: normal
Component: Plugin Directory Keywords:


When looking at the "computed" CSS for the new directory, Chrome shows the 1544x500px banner while Firefox shows the 772x250px banner (for the same retina display).

A quick search suggests variable support for "-webkit-min-device-pixel-ratio" (used for the banner CSS in the new plugin directory) -- perhaps an alternate CSS syntax would be better supported by Firefox and other browsers?

Change History (3)

#1 @jsmoriss
5 years ago

From https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-webkit-device-pixel-ratio:

"This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future."

@media (-webkit-min-device-pixel-ratio: 2) { ... }
/* is equivalent to */
@media (min-resolution: 2dppx) { ... }

#2 @tellyworth
5 years ago

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

In 4514:

Plugin directory: fix high res banners and icons in Firefox. Thanks @jsmoriss.

Fixes #2322.

#3 @tellyworth
5 years ago

I went with an explicit 144dpi and left the -webkit rule in place based on https://css-tricks.com/snippets/css/retina-display-media-query/.

Note: See TracTickets for help on using tickets.