Instructables interstitial "get the app" page has unclickable link

RESOLVED FIXED

Status

RESOLVED FIXED
5 years ago
a month ago

People

(Reporter: rnewman, Assigned: karlcow)

Tracking

Trunk
All
Android

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [serversniff] [country-all] [js] [clientsniff] [sitewait], URL)

(Reporter)

Description

5 years ago
Not sure if this is outreach or our bug, but it works in Chrome, so filing here first.
Better to file as TE. The team can break down the website.
Component: General → Mobile
Product: Firefox for Android → Tech Evangelism
Yep, for sure TE:

<div class="actions">
    <a id="splash-link-getapp" class="ibtn gray-gbg icon-btn splash-link">
        <i class="icon devices-icon"></i>
        <b>Download Free App »</b>
    </a>
    <a id="splash-link-continue" class="splash-link">No thanks, I'll keep browsing</a>
</div>

And in an inline script on the linked URL:

A.bindEvents = function() {
    if (A.device !== "unsupported") {
      A.bindClickEvents();
      A.disableTouchMove();
    }   
  };

The value of A.device comes from A.getDeviceType:

A.getDeviceType = function(a) {
  var ua = a ? a : navigator.userAgent;
  return ua.match(/Android\s+[\d.]+/) ? "android" : ua.match(/iPhone/) ? "iPhone" : "unsupported";
};

Changing the Android regex to /Android(\s+[\d.]+)?/ would then return "android" and the event listeners for the app button (or no thanks link) would be properly set.

We should reach out and suggest that fix, as well as suggesting they have a nicer fallback than getting stuck with an App interstitial with no way to close. Perhaps in A.init they can only do $("#getapp-splash").show(); if they find their "supported" class of devices.
Whiteboard: [country-all][clientsniff][contactready]
(Assignee)

Comment 3

5 years ago
PS: ;) hey guys, it's cool when you can help by having a proper description of the issues and the steps before dumping it in Tech Evangelism.  ok let's see.


On Firefox Android.

1. Go to http://instructables.com/
2. Being redirected to http://m.instructables.com/index
3. Receiving interstitial for downloading the app and a "No Thanks, I'll keep browsing".
4. The "No thanks" is not actionable the full viewport is covered by the interstitial.
5. A reload will make it possible to access the Web site probably a cookie. (the cookie is getapp and set to 1)

On Opera Mobile Android
The "No thanks" link is actionable and working.

On Opera Mini,
direct access to the mobile site.

On Firefox OS,
receiving the desktop content on http://www.instructables.com/index
when typing http://m.instructables.com/index, the browser is redirected to the desktop site.

On iOS Safari,
The interestitial appears, there's a slight issue with the background not being properly set.
The link "no thanks" is working.

So there is an issue with the "No thanks" link not working only in Firefox Android. We should try to figure out why.


On Firefox Desktop, emulating the User Agent of Firefox Android, we get the same exact issue. The markup is:

<a id="splash-link-continue" class="splash-link">No thanks, I'll keep browsing</a>

The script is inside the page

var App = {};
(function(A) {
  A.appUrls = {
    andriod: "https://play.google.com/store/apps/details?id=com.adsk.instructables",
    iPhone: "https://itunes.apple.com/app/instructables/id586765571"
  };
  
  A.init = function() {
    if (!document.cookie.length || (-1 == document.cookie.search(/getapp=1/i))) {
      document.cookie = "getapp=1; path=/";
      $("#getapp-splash").show();
      A.bindEvents();
    }
  };  
  
  A.getAppUrl = function(device) {
    device = device ? device : A.device;
    if (A.device !== "unsupported") return A.appUrls[device]
  };
  
  A.getDeviceType = function(a) {
    var ua = a ? a : navigator.userAgent;
    return ua.match(/Android\s+[\d.]+/) ? "android" : ua.match(/iPhone/) ? "iPhone" : "unsupported";
  };

  A.device = A.getDeviceType();

  A.redirectToUrl = function(url) {
    if (url) window.location.href = url;
  };

  A.getApp = function() {
    A.redirectToUrl(A.getAppUrl());
  };
  
  A.continue = function() {
    $("#getapp-splash").hide();
  };

  A.bindEvents = function() {
    if (A.device !== "unsupported") {
      A.bindClickEvents();
      A.disableTouchMove();
    }   
  };
  
  A.bindClickEvents = function() {
    $("#splash-link-getapp").click(function(e){e.preventDefault(); A.getApp()});
    $("#splash-link-continue").click(function(e){e.preventDefault(); A.continue()});
  };

  A.disableTouchMove = function() {
    document.getElementById('getapp-splash').addEventListener('touchmove', function(e) {
      e.preventDefault();
    }, false);
  };
})(App);

$(function(){App.init()});
Whiteboard: [country-all][clientsniff][contactready] → [serversniff] [country-all] [js]
(Assignee)

Updated

5 years ago
Assignee: nobody → kdubost
Status: NEW → ASSIGNED
Whiteboard: [serversniff] [country-all] [js] → [serversniff] [country-all] [js] [clientsniff]
(Assignee)

Updated

5 years ago
Whiteboard: [serversniff] [country-all] [js] [clientsniff] → [serversniff] [country-all] [js] [clientsniff] [contactready]
I've sent a tweet, https://twitter.com/miketaylr/status/423648871655301121.
Whiteboard: [serversniff] [country-all] [js] [clientsniff] [contactready] → [serversniff] [country-all] [js] [clientsniff] [sitewait]
Cool, got a positive answer: https://twitter.com/instructables/status/425738748198797312
> @miketaylr @canida forwarded to our development team!
Fixed, hooray!
Status: ASSIGNED → RESOLVED
Last Resolved: 5 years ago
Resolution: --- → FIXED
Component: Mobile → Mobile
Product: Tech Evangelism → Web Compatibility
You need to log in before you can comment on or make changes to this bug.