www.vw.ca - site is not usable

[karlcow]

URL: https://www.vw.ca/fr.html

Browser / Version: Firefox iOS 34.1
Operating System: iOS 14.6
Tested Another Browser: Yes Safari

Problem type: Site is not usable
Description: Browser unsupported
Steps to Reproduce:
Going to https://www.vw.ca/

Expected
Access to the site

Actual
Message saying Firefox is not supported

View the screenshot

Browser Configuration

• None

From webcompat.com with ❤️

[karlcow]

The message sent is

<div
  id="vwaUnsupportedBrowserNotification"
  data-heading="Votre navigateur n'est pas supporté. Afin d'optimiser votre expérience sur le site ainsi que la rapidité et la sécurité, prenez le temps de mettre à jour votre navigateur.&lt;br&gt;
"
  data-text="&lt;p&gt;S'il vous plaît, pensez à mettre à jour votre navigateur.&lt;/p&gt;
"
>
  <div id="vwaUBNHitarea"></div>
  <div class="vwaUBNModal">
    <div class="vwaUBNModalInner"></div>
  </div>
  <div id="vwaUBNCloseButton"></div>
</div>

They are using a script
https://www.vw.ca/idhub/etc/clientlibs/vwa-ngw18/ngw18-frontend/clientlibs-unsupportedBrowserNotification-proxy.f4f91e69a1b68fc20a832c62c3c35232.js

the support browser matrix is

        // browser matrix as defined in https://sso.volkswagen.de/bctwiki/display/FEDEVRO/NGW+D6+Browser+Matrix
        var browserMatrix = {
            safari: '11',
            chrome: '68',
            firefox: '61',
            msie: '17', // all IE are outdated
            msedge: '17',
            opera: '55',
            samsungBrowser: '7.2'
        };

        var isUnsupportedBrowser = bowser.isUnsupportedBrowser(
            browserMatrix,
            true
        );

The script is using the bowser library

/*!
 * Bowser - a browser detector
 * https://github.com/ded/bowser
 * MIT License | (c) Dustin Diaz 2015
 */

which correctly identifies Firefox on iOS

firefox: true
ios: true
iphone: true
name: "Firefox"
osname: "iOS"
osversion: "14.4.2"
version: "34.0"
webkit: true

What is happening is that Firefox on iOS has currently the version number 34, because Firefox on iOS can NOT use Gecko. All browsers are forced to use WebKitWebView for rendering websites.

So the site correctly identifies Firefox but fails to identifies that this is Firefox on iOS. They think it's Firefox on Android. They do not use all the information that is sent by Bowser.

The user agent string has the following shape.

Mozilla/5.0 (iPhone; CPU iPhone OS 14_4_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) FxiOS/34.0  Mobile/15E148 Safari/605.1.15

This is an easy fix. And we can fix it with a site intervention too.

[webcompat-bot]

Generate outreach template

[karlcow]

This might be a long stretch, but maybe @elgohr can help us find the right person at Volkswagen Canada, so they can fix their user agent detection matrix to take into account Firefox on iOS as described above.

[karlcow]

See the thread on twitter too.
https://twitter.com/bslobodin/status/1407134859315892227

[elgohr]

@alexey-irkhin

[softvision-raul-bucata]

The issue has been fixed and it is no longer reproducible:

Tested with:

Browser/Version: Firefox Daylight 100.1 (9384)
Operating System: iOS 15.4

Closing this as FIXED

[inv_20/2022]

[softvision-oana-arbuzov]

I was able to reproduce the issue on my iPad.

If I request "Mobile Site", the message is not displayed. Behavior not encountered on Chrome.

Note: Could be related to mozilla-mobile/firefox-ios#9150

Tested with:
Browser / Version: Firefox Daylight 101.1 (10346)
Operating System: iPad Mini 4 iOS 15.4.1 (1536 x 2048 pixels (~324 ppi density))

Reopening the issue for further investigation.

[inv_26/2022]

[webcompat-bot]

Generate outreach template

[softvision-raul-bucata]

Not reproducible on an iPhone device:

Tested with:

Browser/Version: Firefox Daylight 101.1 (10346)
Operating System: iOS 15.5

[inv_26/2022]