1386708 - support.mozilla.org - The icons are blurred in fennec

Status: RESOLVED WONTFIX

(support.mozilla.org :: Mobile, task)

Description

[Adam Stevenson [:adamopenweb]]

Attachment: Screenshot of the issue. Firefox left, Chrome right.

Originally reported: https://webcompat.com/issues/8601


URL: https://support.mozilla.org/en-US/products

Browser / Version: Firefox Mobile Nightly 56.0a1 (2017-07-31)
Operating System: Samsung Galaxy S7 Edge (Android 7.0) - 1440 x 2560 pixels (~534 ppi pixel density)
Tested Another Browser: Yes

Problem type: Design is broken
Description: The icons are blurred
Steps to Reproduce:

    Navigate to: https://support.mozilla.org/en-US/products
    Observe the icons.

Expected Behavior:
The icons are clearly displayed.

Actual Behavior:
The icons are blurred.

Notes:

    The issue is also reproducible on Firefox 54.0 Release (Mobile).
    The issue is not reproducible on Chrome (Mobile) 59.0.3071.125.
    Screenshot attached.

Comment 1

[Adam Stevenson [:adamopenweb]]

As mentioned by Eric on the Webcompat bug:

In Chrome mobile it uses:

@media only screen and (-webkit-min-device-pixel-ratio: 2), not all
products:53
#products > li > a > .logo-sprite {
    background-image: url(//support.cdn.mozilla.net/media/uploads/products/logo-sprite-2x.png?ef1647a3b0e94e51bcdb35ca458f03c4);
    -webkit-background-size: 148px 1776px;
    -moz-background-size: 148px 1776px;
    background-size: 148px 1776px;
}


But Firefox uses:
#products > li > a > .logo-sprite {
    background-image: url(//support.cdn.mozilla.net/media/uploads/products/logo-sprite.png?ef1647a3b0e94e51bcdb35ca458f03c4);
}


Issue https://webcompat.com/issues/7072 is a similar case.

Comment 2

[Roland Tanglao needinfo please :rolandtanglao, :mohnkuchen, :adobo, :sinigang, :roland]

:madalina i suggest setting to P2 and fixing this in the next sprint in  Q3 or early Q4 (maybe safwan or mikcz or some other volunteer can do a pull request)?

Comment 3

[Seburo]

Closed as per https://blog.mozilla.org/sumo/2019/06/07/sumo-platform-roadmap/