If you think a bug might affect users in the 57 release, please set the correct tracking and status flags for Release Management.

mazda.co.jp - overlapped images and texts sent to Firefox on Android

NEW
Unassigned

Status

Tech Evangelism
Mobile
9 months ago
8 months ago

People

(Reporter: ryang, Unassigned, NeedInfo)

Tracking

(Blocks: 1 bug)

Firefox 53
All
Android

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [css] [serversniff] [contactready], URL)

Attachments

(2 attachments)

STR:
1. open fennec go to http://www.mazda.co.jp/cars/cx-5/
tested on Nightly 53.0a1 (2016-12-19) 
Actual Result: (attachment1 [details] [diff] [review])
Overlapped Graphs and wordings when visiting some websites rich of contents of images and words.


Expected Result: (attachment2 [details] [diff] [review])
well organized wording and images
Created attachment 8823570 [details]
overlapped layout
Created attachment 8823572 [details]
expected layout
OS: Unspecified → Android
Hardware: Unspecified → All
Version: unspecified → 53 Branch
I see the same thing in desktop with responsive design mode and a narrower screen width. I also see the same behaviour in Chrome desktop with a narrow window. However Chrome for Android has smaller images, which avoids the overlapping problem. I can get those smaller images if I spoof the Android Chrome UA string in Firefox Desktop. So it boils down to them sending special content for Chrome on Android that they should also send to Firefox on Android. Apart from the image sizing the page is pretty good with responsive design.
Component: Graphics, Panning and Zooming → Mobile
Product: Firefox for Android → Tech Evangelism
Version: 53 Branch → Firefox 53

Comment 4

9 months ago
Let's focus on the first part of the page. (The symptoms are the same for the rest of the page)

The html received in Firefox:

```html
<div class="cx5-cars" style="">
              <div class="cx5-car-gas cx5-bg">&nbsp;</div>
              <div>
                <p class="cx5-cars-type cx5-strong">ガソリン</p>
                <p class="cx5-note cx5-note-dark">
                  <span class="cx5-wide">「人馬一体」の走りと優れた燃費を両立した</span>
                  <span class="cx5-wide">高効率直噴ガソリンエンジン搭載モデル</span>
                </p>
              </div>
            </div>
```

and the CSS

```css
.cx5-v1612 .cx5-car-gas {
	width: 365px;
	height: 182px;
	background: url(http://jp.mazdacdn.com/common/assets/cars/cx-5/img/highlight_1612/line_up_gasolene.png) no-repeat;
}
```
The image is 364x182 pixels.


=======
The html sent for Chrome:

```html
<div class="cx5-cars cx5-cars_header">
              <div class="cx5-cars_image cx5-car-gas cx5-bg">&nbsp;</div>
              <div>
                <p class="cx5-cars-type cx5-strong">ガソリン</p>
                <p class="cx5-note cx5-note-dark">
                  <span class="cx5-wide">「人馬一体」の走りと優れた燃費を両立した</span>
                  <span class="cx5-wide">高効率直噴ガソリンエンジン搭載モデル</span>
                </p>
              </div>
            </div>
```

and the CSS

```css
.cx5-v1612-sp .cx5-cars_image {
	min-height: 80px;
	background: no-repeat top;
	background-size: 130px 65px;
}

.cx5-v1612-sp .cx5-car-gas {
	background-image: url(http://jp.mazdacdn.com/common/assets/cars/cx-5/img/highlight_1612/sp_car_gas.png);
}
```

The image is 259x130 pixels.

but more than a different size image it's specifically the markup and the CSS being sent which is different.


And indeed when faking Chrome UA on Firefox Android, we receive a working version of this page.
Whiteboard: [css] [serversniff]

Comment 5

9 months ago
Maybe a possibility of contacts at
http://www.mazda.co.jp/inquiry/

Kudo-san, could you help us to contact Mazda?
Flags: needinfo?(kudo)

Updated

9 months ago
Whiteboard: [css] [serversniff] → [css] [serversniff] [contactready]

Comment 6

9 months ago
Summary for contacting:

About http://www.mazda.co.jp/cars/cx-5/

* Firefox Android receives a broken version of this page.
  Screenshot: https://bugzilla.mozilla.org/attachment.cgi?id=8823570
* Chrome Android receives a __different version__
  Screenshot: https://bugzilla.mozilla.org/attachment.cgi?id=8823572
* The version sent to Chrome is working on Firefox Android.
* The difference is probably due to user agent sniffing on the server side.

→ http -b GET http://www.mazda.co.jp/cars/cx-5/ 'User-Agent:Mozilla/5.0 (Linux; Android 4.4.4; SH-01G Build/SB080) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.76 Mobile Safari/537.36' | wc -c
   67725

→ http -b GET http://www.mazda.co.jp/cars/cx-5/ 'User-Agent:Mozilla/5.0 (Android 5.1.1; Mobile; rv:51.0) Gecko/51.0 Firefox/51.0' | wc -c
   64743
Summary: Overlapped Graphs and wordings when visiting some websites rich of contents of images and words. → mazda.co.jp - overlapped images and texts sent to Firefox on Android
Blocks: 1157964
Hello Karl, thank for your analysis and survey.

Per your comment6, we also tested other browsers (UC browser, Opera browser, Dolphin browser)
using the same web page, the graphs and texts of Mazda worked well.

Does it all because of user agent sniffing on the server side ? 

Thank you very much !
Flags: needinfo?(kdubost)

Comment 8

8 months ago
Rachelle: I can use phony change user agent string to Chrome mobile on Firefox mobile 53 and get the same result as Chrome mobile 55. Looks like user agent detection on server side really affect this case.

Comment 9

8 months ago
Rachelle. Yes. Probably detecting WebKit on the server side in the user-agent string. UC browser, Opera browser, Dolphin browser share the same rendering engine.
Flags: needinfo?(kdubost)
You need to log in before you can comment on or make changes to this bug.