www.motorsport.com - Slider view is not functional

[tbruckschlegel]

URL: https://www.motorsport.com/f1/news/formula-one-mclaren-new-car-slide-view/4337668/?utm_source=RSS&utm_medium=referral&utm_campaign=RSS-F1&utm_term=News&utm_content=www

Browser / Version: Firefox Mobile 67.0
Operating System: Android
Tested Another Browser: Yes

Problem type: Site is not usable
Description: slider view is not working/slider is not movable
Steps to Reproduce:

Browser Configuration

• mixed active content blocked: false
• image.mem.shared: true
• buildID: 20190210094433
• tracking content blocked: false
• gfx.webrender.blob-images: true
• hasTouchScreen: true
• mixed passive content blocked: false
• gfx.webrender.enabled: false
• gfx.webrender.all: false
• channel: nightly

Console Messages:

[u'[JavaScript Warning: "unreachable code after return statement" {file: "https://www.google-analytics.com/gtm/js?id=GTM-NSCXND7&l=gtmDataLayer&t=gtm1&cid=1187608240.1550267518" line: 113 column: 180 source: "===Xa.Ia.length)return"g";return"G"}function gj(){return"z";return"w"}var Ga=function(a){var b=Xa.g.split("-"),d=b[0].to"}]', u'[console.info(Powered by AMP  HTML  Version 1902081532110, https://www.motorsport.com/f1/news/formula-one-mclaren-new-car-slide-view/4337668/?utm_source=RSS&utm_medium=referral&utm_campaign=RSS-F1&utm_term=News&utm_content=www) https://cdn.ampproject.org/rtv/011902081532110/amp4ads-v0.js:546:49]', u'[console.info(Powered by AMP  HTML  Version 1902081532110, https://www.motorsport.com/f1/news/formula-one-mclaren-new-car-slide-view/4337668/?utm_source=RSS&utm_medium=referral&utm_campaign=RSS-F1&utm_term=News&utm_content=www) https://cdn.ampproject.org/rtv/011902081532110/amp4ads-v0.js:546:49]', u'[console.log([BC][ERROR] an error occured in interactiontype: [contentmeter]\n            called method: [onEvent]\n            error: b is undefined) https://cdn.blueconic.net/motorsport.js:131:225]', u'[console.log([BC][ERROR] --stacktrace--) https://cdn.blueconic.net/motorsport.js:131:225]', u'[console.trace() https://cdn.blueconic.net/motorsport.js:131:418]', u'[console.log([BC][ERROR] --end stacktrace--) https://cdn.blueconic.net/motorsport.js:131:225]', u'[JavaScript Warning: "Loading mixed (insecure) display content http://bcp.crwdcntrl.net/map/c=13363/tp=BLCO/tpid=21077665-577e-4937-9232-176394377da8 on a secure page" {file: "https://motorsport.blueconic.net/plugin/plugin/dde01a7baebd7bc9fe9541736c752135" line: 1}]', u'[JavaScript Warning: "Mit document.write() wurde ein nicht balancierter Baum geschrieben, was dazu gefhrt hat, dass Daten aus dem Netzwerk neu geparst werden mussten. Fr weitere Informationen https://developer.mozilla.org/en/Optimizing_Your_Pages_for_Speculative_Parsing" {file: "https://tpc.googlesyndication.com/safeframe/1-0-32/html/container.html?n=1" line: 8}]']

From webcompat.com with ❤️

[tbruckschlegel]

OnePlus 6, Android 9

[cipriansv]

Thanks for the report, @tbruckschlegel
I was able to reproduce the issue. The slider view is not functional

Tested with:
Browser / Version: Firefox Nightly 67.0a1 (2019-02-26), Chrome 72.0.3626.109
Operating System: Windows 10 Pro

This is the web page displayed in Firefox Nightly:

And this is the web page displayed in Chrome:

[karlcow]

This is working on RDM but not on the device.
this is inserted through an iframe.

<iframe class="juxtapose" src="https://cdn.knightlab.com/libs/juxtapose/latest/embed/index.html?uid=05449168-3056-11e9-9dba-0edaf8f81e27" width="100%" height="535" frameborder="0"></iframe>

and inside the slider

<div class="jx-slider">
  <div class="jx-handle " style="left: 32.88%;">
    <div class="jx-arrow jx-left"></div>
    <div class="jx-control">
      <div
        class="jx-controller"
        tabindex="0"
        role="slider"
        aria-valuenow="50"
        aria-valuemin="0"
        aria-valuemax="100"
      ></div>
    </div>
    <div class="jx-arrow jx-right"></div>
  </div>
  <div class="jx-image jx-left " style="width: 32.88%;">
    <img
      src="https://cdn-0.motorsport.com/static/fmf/1877/MCL34-02.jpg"
      alt=""
    />
    <div class="jx-label" tabindex="0">McLaren MCL33</div>
  </div>
  <div class="jx-image jx-right " style="width: 67.12%;">
    <img
      src="https://cdn-0.motorsport.com/static/fmf/1876/MCL34-01.jpg"
      alt=""
    />
    <div class="jx-label" tabindex="0">McLaren MCL34</div>
  </div>
  <a href="http://juxtapose.knightlab.com" target="_blank" class="jx-knightlab">
    <div class="knightlab-logo"></div>
    <span class="juxtapose-name">JuxtaposeJS</span>
  </a>
</div>

This is using the same technology than in #15381 and #14134

When loading the iframe directly on mobile, the slider is working.
https://cdn.knightlab.com/libs/juxtapose/latest/embed/index.html?uid=05449168-3056-11e9-9dba-0edaf8f81e27

The version used is

/* juxtapose - v1.2.0 - 2017-12-18
 * Copyright (c) 2017 Alex Duner and Northwestern University Knight Lab
 */
/* juxtapose - v1.1.2 - 2015-07-16
 * Copyright (c) 2015 Alex Duner and Northwestern University Knight Lab
 */

[karlcow]

When touching the screen on the non-iframed version, it starts with a touchstart event.

      this.slider.addEventListener("touchstart", function(e) {
        e = e || window.event;
        e.preventDefault();
        e.stopPropagation();
        self.updateSlider(e, true);

        this.addEventListener("touchmove", function(e) {
          e = e || window.event;
          e.preventDefault();
          e.stopPropagation();
          self.updateSlider(event, false);
        });

      });

on the iframe version this is working too. There is a touchstart event.

and it goes through BUT it doesn't seem to go through the touchmove event like it was not fired at all.

• Reduce time to touch activation by synthesizing a fake touchmove
• I don't know if this one is related. coalesce touchmove but it shows a difference with chrome.

but why this is happening only when inserted in the iframe.

I need help here.

Would that be in your area @smaug---- ?

[wisniewskit]

@karlcow, this is basically caused by them checking event.pageX on TouchEvents, as you deduced in #15381. When I alter their script to not consider event.pageX/Y, it works for me on Fennec nightly. As such this is a dupe of the same bug.

If they (or the juxtapose library) wish, they can change their code as well to something like this:

  function getPageX(e) {
    var pageX;
    if (e.pageX && !(e instanceof TouchEvent)) { // and similar in the getPageY function
      pageX = e.pageX;
    } else if (e.touches) {
      pageX = e.touches[0].pageX;
    } else {
      pageX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
    }
    return pageX;
  }

In addition, they're also accidentally reading window.event in the touchmove handler:

        this.addEventListener("touchmove", function(e) {
          e = e || window.event;
          e.preventDefault();
          e.stopPropagation();
          self.updateSlider(event, false); // this should be 'e', not 'event'
        });

Which breaks the UX on non-nightly builds of Firefox.

I'll leave it up to you if we ought to just close this as a dupe of the Bugzilla bug or do some outreach as well.

[miketaylr]

Which breaks the UX on non-nightly builds of Firefox.

(window.event shipped in 66, so if this only works in Nightly then there's something else at play)

[wisniewskit]

(window.event shipped in 66, so if this only works in Nightly then there's something else at play)

No, it's fine. I just tested whether window.event was the culprit by toggling the preference in nightly, and clearly crossed wires as to what has and hasn't shipped related to window.event :)

[karlcow]

just for the paper trail, I filed a bug on their project when diagnosing #15381.
NUKnightLab/juxtapose#147

[cipriansv]

After retesting the issue I confirm that the issue has been fixed.

The slider view is now working.

Tested with:
Browser / Version: Firefox Nightly 200823(🦎 81.0a1-20200820093209)
Operating System: OnePlus6 (Android 10) - 1080 x 2280 pixels (~402 ppi pixel density)

Closing the issue as fixed.