958411 - broken rendering on rakuten mobile top page

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect, P3)

Description

[Makoto Kato [:m_kato]]

Site: http://www.rakuten.co.jp/
broken rendering on rakuten mobile top page

:: Steps To Reproduce

1. access http://www.rakuten.co.jp using Firefox Android


:: Expected Result

fine as iOS, Android Stok browser or Chrome Android

:: Actual Result

broken top site

:: Additional Information

Software Version: 26
Device Information: Nexus 5
Reporter's User Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64; rv:29.0) Gecko/20100101 Firefox/29.0

Comment 1

[Makoto Kato [:m_kato]]

Attachment: screenshot

Comment 2

[Hallvord R. M. Steen [:hallvors]]

Attachment: rakuten.json - problems reported

Comment 3

[Hallvord R. M. Steen [:hallvors]]

Problems: quite some WebKit CSS in the version of the page iOS (and presumably Android) gets. Also, Firefox OS gets the desktop page, not mobile. They should fix the CSS first, then the redirect :)

Comment 4

[Karl Dubost💡 :karlcow]

Attachment: rakuten-css.png

This is a screenshot with Firefox Mobile when the CSS flexbox has been fixed.

The CSS issues are caused by the usage of old flexbox.

with things like:

	display: -webkit-box;
	display: box;

instead of 

	display: -webkit-box;
	display: flex;
etc.

It took me about 20 minutes to fix the CSS. So it's a very low hanging fruit.

Tomoya-san,
do we have contacts at Rakuten?

Comment 5

[Karl Dubost💡 :karlcow]

Checked today and still the case.

Comment 6

[Karl Dubost💡 :karlcow]

See also on https://github.com/webcompat/web-bugs/issues/915

Comment 7

[Karl Dubost💡 :karlcow]

with user agent override to be chrome + webkit prefixes fix in Gecko, the site is now working.
https://developer.mozilla.org/en-US/Firefox/Releases/49#Compatibility

Will be fixed with Firefox 49.

Comment 8

[Karl Dubost💡 :karlcow]

Mike, 
we should add rakuten to the UA override list.
https://hg.mozilla.org/mozilla-central/raw-file/tip/mobile/android/app/ua-update.json.in

Comment 9

[Mike Taylor [:miketaylr]]

> we should add rakuten to the UA override list.

OK, we should probably wait until 49 is released (unless spoofing as Chrome today means it's just as broken as it was yesterday).

Comment 10

[Mike Taylor [:miketaylr]]

I've apparently dropped the ball on this one... Karl, do you want to prepare a patch?

Comment 11

[Karl Dubost💡 :karlcow]

I will do that.

Comment 12

[Karl Dubost💡 :karlcow]

Hmm I was about to open a bug and submit a patch for the UA override but I tested this morning with responsive design mode and Firefox Android UA, and it's working. I still need to check with a real android device or if someone else beats me to it. 

If it's working on the device we can close this as FIXED.

Comment 13

[Eric Tsai (no more review request accepted)]

Attachment: rakuten.co.jp on pixel APi 25 emulator

Doesn't work on pixel API 25 emulator Firefox Nightly and Sony Z3 Firefox release (54)

Comment 14

[Karl Dubost💡 :karlcow]

Attachment: rakuten responsive design + Firefox 54 Android UA

This is what I get on Firefox Desktop. Responsive Design + following UA
Mozilla/5.0 (Android 5.1.1; Mobile; rv:54.0) Gecko/54.0 Firefox/54.0

Comment 15

[Karl Dubost💡 :karlcow]

So weird.

# Firefox Android UA

→ http GET https://www.rakuten.com/ 'User-Agent:Mozilla/5.0 (Android 5.1.1; Mobile; rv:54.0) Gecko/54.0 Firefox/54.0'| wc -c
  115511

→ http GET https://www.rakuten.com/ 'User-Agent:Mozilla/5.0 (Android 5.1.1; Mobile; rv:54.0) Gecko/54.0 Firefox/54.0'| grep ismobile
        var dataLayer = [{"domain":"rakuten.com","enterpriseId":"10000","currency":"USD","technology":"MVC","ismobile":true,"issecuremobile":false,"pageRoute":"/eco/index"}];



# Firefox Desktop UA

→ http GET https://www.rakuten.com/ 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:55.0) Gecko/20100101 Firefox/55.0' | wc -c
  130762

→ http GET https://www.rakuten.com/ 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:55.0) Gecko/20100101 Firefox/55.0' | grep ismobile
        var dataLayer = [{"domain":"rakuten.com","enterpriseId":"10000","currency":"USD","technology":"MVC","ismobile":false,"issecuremobile":false,"pageRoute":"/eco/index"}];

Comment 16

[Karl Dubost💡 :karlcow]

enough to trigger the mobile version

→ http GET https://www.rakuten.com/ 'User-Agent:(Android 7.0; Mobile)'| grep ismobile
        var dataLayer = [{"domain":"rakuten.com","enterpriseId":"10000","currency":"USD","technology":"MVC","ismobile":true,"issecuremobile":false,"pageRoute":"/eco/index"}];

Comment 17

[Karl Dubost💡 :karlcow]

checked today on the Android device and I get the mobile site after clearing all private data.

Eric, what is your UA string?

Comment 18

[Eric Tsai (no more review request accepted)]

Firefox mobile 56 Nightly on Z3C get the same result, UA string: "Mozilla/5.0 (Android 5.0.2; Mobile; rv:56.0) Gecko/56.0 Firefox/56.0"

Comment 19

[Eric Tsai (no more review request accepted)]

To noted, my test URL is http://www.rakuten.co.jp/ not https://www.rakuten.com

Comment 20

[Karl Dubost💡 :karlcow]

rha my bad. Indeed. I will prepare the patch.

Comment 21

[Oana Arbuzov [:oanaarbuzov]]

We get the Desktop page now on Firefox after the override patch landed, could you please investigate? 
Note: Not reproducible on Responsive Mode design.

Comment 22

[Sergiu Logigan [:sergiu]]

RDM vs Real Device:
http://prntscr.com/kopcq2

Comment 23

[Karl Dubost💡 :karlcow]

Sergiu, which user agent string did you use on RDM?
I get your screenshot only if I use the Chrome User Agent.

But that's not what is done currently. As expressed in https://bugzilla.mozilla.org/show_bug.cgi?id=1385206#c1

> Just keeping Gecko, but removing Firefox/54.0 in there does the job, instead of a full blown Chrome UA.

So we just removed the Firefox part.
This is obviously not enough anymore according to your tests.

Let's check.

Ah interesting on RDM with User-Agent: Mozilla/5.0 (Android 9.0.0; Mobile; rv:64.0) Gecko/64.0 Firefox/64.0
this is still working. We receive the mobile site, but on the device it is not working anymore.

AH it can not work…

```
Host: www.rakuten.co.jp
User-Agent: Firefox.+$#
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Referer: https://www.google.com/
Connection: keep-alive
Cookie: ak_bmsc=25AD34906A5DBD29C4A7B3C8108DF06D17D2CAA5C1170000726C8F5BBB28233B~plxr3Cz5FsNJvRZjT4tqTaHsjplghO6t5R01atxo5LrpP8rqklqz8orQ6gb5812qEf9TswTFxHT/xRa2oeyRIW1oFnKhKLDLkRVcUTPFXY1wxwX0E4j467mbECz9lsXT9bTGZ0gZWr8Y4IYeB6MGj42EwXejuhWF+KEqvtD4GKtRsRW/GsGHylJMf+XAuNl0VIu5CTRNGvoA9ZzzHExV0uHMOEW796iFMhTi6JfVbY5bMDrLFINO+8W+6irhCCzv+jbEV2NGYdqi4rpP7KLjgFsA==; s_pers=%20s_mrcr%3D1100400000000000%257C4000000000000%257C4000000000000%257C4000000000000%7C1693807239011%3B; Rt=be086b42ee3c21a859dfcfce96d46429; Rp=79b215502ebf401cdde74a66105b8f6c76a1331; rat_v=71e56a3a75ac699ddde74b66105b8f6c76a133d; __gads=ID=acab8bcd791631eb:T=1536126082:S=ALNI_MYnNQP_2jJH0gqfsejovFYlgIXcSQ; cto_lwid=3cffdf1e-6dea-40ec-8af6-8a85243707b8; __pp_uid=AfhgCotZZ1380LAe1sdWP25dqA9ClZjM; Apache=210.194.43.135.1536127240717140
Upgrade-Insecure-Requests: 1
Cache-Control: max-age=0
```


The User Agent is… o_0 

      Firefox.+$#

https://dxr.mozilla.org/mozilla-central/rev/c2e3be6a1dd352b969a45f0b85e87674e24ad284/mobile/android/app/ua-update.json.in#18,19

I don't know if it's a regression or if it was always the case… but this is not good.

It seems there's a need for something after the # sign. Maybe a space.

Comment 24

[Karl Dubost💡 :karlcow]

We need to prepare a new patch.

Mike, do I open a new bug
   or do I reopen Bug 1385206

Comment 25

[Sergiu Logigan [:sergiu]]

Karl, I used Samsung Galaxy S7 as UA string.
Here it is again, RDM (Nightly 64 Desktop) against real device - Huawei P10 (Android 8.0) - 1080 x 1920 pixels (~432 ppi pixel density) - Nightly 63 Mobile.

http://prntscr.com/kqs10n

Comment 26

[Mike Taylor [:miketaylr]]

(In reply to Karl Dubost :karlcow from comment #23)
> I don't know if it's a regression or if it was always the case… but this is
> not good.
> 
> It seems there's a need for something after the # sign. Maybe a space.

Arf, yes. My bad for not catching in review.

See https://bugzilla.mozilla.org/show_bug.cgi?id=838332#c27, for example.

Karl, can you please open a new bug?

Comment 27

[Karl Dubost💡 :karlcow]

I opened the bug a couple of days ago. 
https://bugzilla.mozilla.org/show_bug.cgi?id=1489914

Comment 28

[Firefox Bug Husbandry Bot]

See bug 1547409. Moving webcompat whiteboard tags to keywords.

Comment 29

[Raul Bucata]

It seems that the issue has been fixed, as I was not able to reproduce the issue. Upon accessing the page, the mobile version of the page is correctly displayed:

Reporter, could you please confirm this?

https://prnt.sc/pi2XYMWyrtWS

Tested with:

Browser / Version: Firefox Nightly 100.0a1 (2015869419 -🦎100.0a1-20220317092857🦎)
Operating System: Samsung A51 (Android 11) -1080 × 2400 pixels 20:9 aspect ratio (~405 ppi density)
Operating System: Google Pixel 3 (Android 12) -1080 x 2160 pixels, 18:9 ratio (~443 ppi density)

Comment 30

[Makoto Kato [:m_kato]]

Yes, our UA was overridden by bug 1385206. So I confirmed it.