www.easports.com - The site is broken on 13 inch Retina display

[Regaddi]

URL: https://www.easports.com/de/fifa/ultimate-team/web-app/

Browser / Version: Firefox 64.0 Operating System: Mac OS X 10.13 Tested Another Browser: Yes

Problem type: Design is broken Description: Can't easily access Fifa 19 FUT Web App on Firefox Steps to Reproduce: When visiting the web app, it immediately states, that I should "rotate the device". When shrinking down to a mobilish viewport, the Login is prompted and I can login. When logged in, the App says "Resize window. Please increase the size of your web browser window to display the content." After increasing the size back again to a desktopish size I can access the app. However any list views are rendered like in mobile viewport.

The app works in Safari and Chrome as expected.

Browser Configuration

• None

Reported by @regaddi

From webcompat.com with ❤️

[softvision-sergiulogigan]

@Regaddi I get this, when performing these Steps to reproduce:

1. Go to https://www.easports.com/de/fifa/ultimate-team/web-app/
2. Click the "Anmelden" button.

Do you have any additional steps which you perform in order to reach the described state you end up in?

[softvision-sergiulogigan]

So, after a quick call with @Regaddi , we observed that the issue is only reproducible on his 13,3-Inch (2560 x 1600) retina display, and it's not reproducible on his standalone monitor, DELL U2414H 23,5-Inch (1920 x 1080).

We tested on both Firefox Release 64 and Firefox Nightly 66. Both behaved in the same way.

Unfortunately, on my 12 inch (2304x1440) retina display, the issue is not reproducible.

@karlcow can you please take a look at this one?

[karlcow]

Firefox left, chrome right First opening with window of the same size on a big secondary screen.

and then if I resize the windows.

so I'm not sure if there is a difference of behavior for windows with the same size.

[karlcow]

For me the message is displayed in both browsers on the retina screen as soon as the width is inferior to the height.

[karlcow]

@regaddi @softvision-sergiulogigan Maybe I'm missing something… but it looks like invalid?

[Regaddi]

EA seems to use some JavaScript logic, to determine if the browser is a phone or not.

This file contains a function isPhone() with the following code:

function isPhone() {
  return isWeb()
    ? window.matchMedia("(max-device-width: 599px) and (orientation: portrait)")
        .matches ||
        window.matchMedia(
          "(min-aspect-ratio: 32/19) and (max-device-width: 1023px) and (orientation: landscape)"
        ).matches
    : isAndroid()
    ? window.matchMedia("(max-device-width: 599px)").matches
    : window.matchMedia("(orientation: portrait)").matches;
}

Where this statement

window.matchMedia(
          "(min-aspect-ratio: 32/19) and (max-device-width: 1023px) and (orientation: landscape)"
        ).matches

resolves with true on my MacBook retina screen and with false on my external display.

[karlcow]

Thanks @Regaddi for exploring with me a bit more on Friday. Let's push this to needscontact.

Let's note that there is also the fact that Chrome doesn't react the same way on your laptop. So there is maybe a bit of user agent sniffing in it too.

[adamopenweb]

Reaching out via partner mailing list.

[softvision-oana-arbuzov]

I'm unable to reproduce the issue on my side.

Tested with: Browser / Version: Firefox Nightly 69.0a1 (2019-06-09) Operating System: Windows 10 Pro, MacOS 10.14.4

@Regaddi do you still reproduce the issue?

[Regaddi]

Hey @softvision-oana-arbuzov,

it is still reproducable on my end (Firefox Developer Edition 68.0b8 & Firefox 67.0.1). When I open the web app on my retina display, the app shows the following screen:

[softvision-oana-arbuzov]

Thanks @Regaddi

[softvision-oana-arbuzov]

@Regaddi is this still an issue?

[Regaddi]

It doesn't seem to be an issue anymore with latest firefox and the latest website version 🙌