search

atom / atom.io

🌐 A place for feedback on the atom.io website and package API
161 stars 98 forks source link

Wrong resolution images selected on HiDPI displays #89

Open TheDecryptor opened 8 years ago

TheDecryptor commented 8 years ago

I noticed this in Firefox, none of the images on the site load the correct resolution versions on a HiDPI display, they instead load the 1x variants

The CSS has a lot of media queries like this

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
    .illustration-contact {
        background-image:url(//github-atom-io-herokuapp-com.global.ssl.fastly.net/assets/contact@2x-285e8de5da95d74741ac95bd30e1f64e.gif);
        ...
    }
}

Which don't work since they only include the non-standard WebKit query, and a unprefixed version of that (Which being a non-standard property, doesn't exist).

Replacing the min-device-pixel-ratio: 2 with min-resolution: 2dppx makes the images load correctly in Firefox (And doesn't break it in browsers like Chrome because they support both the non-standard WebKit stuff and the standard properties)

50Wliu commented 7 years ago

Looks like this got fixed for one occurrence, but it's still broken for the 17 others.

Fixed version I found Ctrl+F'ing through the minified CSS:

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx)