www.vw.ca - site is not usable

karlcow commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

Generate outreach template

karlcow commented 3 years ago

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 commented 3 years ago

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