944767 - Instructables interstitial "get the app" page has unclickable link

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[Richard Newman [:rnewman]]

Not sure if this is outreach or our bug, but it works in Chrome, so filing here first.

Comment 1

[Kevin Brosnan [Ex-Mozilla]]

Better to file as TE. The team can break down the website.

Comment 2

[Mike Taylor [:miketaylr]]

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.

Comment 3

[Karl Dubost💡 :karlcow]

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()});

Comment 4

[Mike Taylor [:miketaylr]]

I've sent a tweet, https://twitter.com/miketaylr/status/423648871655301121.

Comment 5

[Mike Taylor [:miketaylr]]

Cool, got a positive answer: https://twitter.com/instructables/status/425738748198797312
> @miketaylr @canida forwarded to our development team!

Comment 6

[Mike Taylor [:miketaylr]]

Fixed, hooray!