1405545 - [css spritesheet] Workaround Chome Web View CSS Spritesheet clipping issue in mobile AAQ

Status: VERIFIED FIXED

(support.mozilla.org :: Questions, task, P1)

Description

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

Attachment: 37410085676_c12bf4deb2_o.jpg

+++ This bug was initially created as a clone of Bug #1404792 +++

This bug is based on this Rocket github issue:
https://github.com/mozilla-tw/Zerda/issues/1045

= AAQ process when in mobile view on Chrome Based Browsers: =

== Steps to reproduce: ==

1. On Google Chrome for Android OR any of the non gecko based firefox mobile browser products (firefox focus for android, firefox focus for android, firefox focus for ios, firefox rocket), go to support.mozilla.org

2. Tap on "Ask a question"

== Expected Result: ==

1. All the Firefox icons show up correctly on the top

== Actual Result: ==

1. icons are clipped/cut off (is this a CSS overflow issue?!?!) !
   
See screenshots:

* https://flic.kr/p/YZNt8b (latest rocket nightly) see attached screenshot
* https://flic.kr/p/YFpzfu (firefox for ios)
* https://flic.kr/p/Y3ZEAr (focus for ios)

== Questions ==

1. :giorgos is there a Kitsune workaround that works in both Firefox for Android 
AND 
Chromium Based Browsers like Firefox Focus for Android, Firefox Rocket and Chrome?

2. If there is a workaround can we get this implemented and tested before October 9th?

Comment 1

[Giorgos Logiotatidis [:giorgos]]

:agibson maybe you can shed some light on this CSS issue?

Comment 2

[Alex Gibson [:agibson]]

(In reply to Giorgos Logiotatidis [:giorgos] from comment #1)
> :agibson maybe you can shed some light on this CSS issue?

I can reproduce this in Chrome on Desktop by the following steps:

1.) Visit https://support.mozilla.org/
2.) In the footer, click the "Switch to mobile site" link
3.) Open the menu button, and click "Ask a question"

Inspecting the CSS, it looks like the issue might be some webkit specific CSS that targets high-resolution screens, resulting in a broken CSS sprite:

    @media only screen and (-webkit-min-device-pixel-ratio: 2),only screen and (min-device-pixel-ratio:2) {

    }

Note that Gecko browsers currently get blurry icons, since this media query is not satisfied. `min-device-pixel-ratio` is not valid (it should use `min-resolution` instead, which is the non-proprietry property).

Comment 3

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

Thank-you :agibson for your awesome CSS debugging. :giorgos any chance we can get this fixed before October 9?

Comment 4

[[github robot]]

Commits pushed to master at https://github.com/mozilla/kitsune

https://github.com/mozilla/kitsune/commit/db085004a0520314598a0eb99e9fcf76dec9196b
[fix bug 1405545] Fix background-size for mobile logos sprite 2x.

https://github.com/mozilla/kitsune/commit/7a7e64f1593c5aaf43f8fefa407e63e4d54b92e7
Merge pull request #2923 from mozilla/1405545

 [fix bug 1405545] Fix background-size for mobile logos sprite 2x.

Comment 5

[Giorgos Logiotatidis [:giorgos]]

The problem was the wrong height for the mobile image and it appeared after we introduced the new new for Rocket.

Comment 6

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

fabulous, thanks :giorgos. Verified on Firefox for Android 56, Firefox Rocket and Firefox for iOS 9.0