instagram.com - site is not usable

[reinhart1010]

URL: https://instagram.com/

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

Problem type: Site is not usable
Description: Rotating and/or moving text in creating a new story is very slow and choppy.
Steps to Reproduce:

1. Visit the URL above.
   Note: you will need to log in with existing Instagram account.
2. Add a new story. This can be accessed by tapping the camera icon on the top left side of the page.
3. Select a random picture.
4. Add a text to the image. This is done by tapping the "Aa" button on the top-right. See attached image for reference.
5. Try to move, resize, and/or rotate the text.
   In Firefox, the text moves quite slow and sometimes make the site unresponsive, while it works fine in Chrome or other WebView-based browsers.
   

From webcompat.com with ❤️

[softvision-oana-arbuzov]

I did experience the same behavior reported by @reinhart1010 on my LG G5 (Android 7.0) mobile device. I was not able to reproduce it on Google Pixel (Android 8.0.0) device.

• LG G5 (LG-H860, Released 2016)

  • Chipset: Qualcomm MSM8996 Snapdragon 820
  • CPU: Quad-core (2x2.15 GHz Kryo & 2x1.6 GHz Kryo)
  • RAM: 4 GB
  • GPU: Adreno 530

• Google Pixel (Pixel, Released )

  • Chipset: Qualcomm MSM8996 Snapdragon 821
  • CPU: Quad-core (2x2.15 GHz Kryo & 2x1.6 GHz Kryo)
  • RAM: 4 GB
  • GPU: Adreno 530

Tested with:
Browser / Version: Firefox Nightly 59.0a1 (2017-12-21)
Operating System: LG G5 (Android 7.0) - Resolution 1440 x 2560 pixels (~554 ppi pixel density)

Setting to "NeedsDiagnosis" for further investigation.

[reinhart1010]

I tested this on two devices. This information might be useful to diagnose the problem:

• Samsung Galaxy J7 Pro (SM-J730G/DS, Released 2017)

  • Chipset: Samsung Exynos 7870 Octa
  • CPU: Octa-core 1.6 GHz Cortex-A53
  • RAM: 3GB
  • GPU: Mali-T830 MP1

• LG K10 LTE (LG-K430dsY, Released 2016)

  • Chipset: Mediatek MT6753
  • CPU: Octa-core 1.14 GHz Cortex-A53
  • RAM: 2GB
  • GPU: Mali-T720MP3

@softvision-oana-arbuzov Can you list these specs (Chipset, CPU, RAM and GPU) information of your device?

[karlcow]

So there is a performance on low memory devices :/
Not sure how to deal with those. We could try to report it on bugzilla mozilla.

[softvision-oana-arbuzov]

The issue is still reproducible.

Tested with:
Browser / Version: Firefox Nightly 62.0a1 (2018-05-08)
Operating System: Samsung Galaxy S6 (Android 7.0) - Resolution 1440 x 2560 pixels (~577 ppi pixel density)

[karlcow]

I wonder if this will improve when switching to GeckoView.
@reinhart1010 did you try on Focus with GeckoView.

[reinhart1010]

@karlcow not yet but might try with Fenix instead.

[reinhart1010]

Ok. Here are some results:

• Firefox 65 (20190211233335): Issue still exists
• Fenix 1.0.1909/67 (20190213102848): Able to get system file selection activity but unable to proceed to next step (editing)
• Focus 8.0.8/65 (20190125143011): Unable to get system file selection activity.

Note that, in order to reproduce this issue, one has to upload the desired image to be published to Instagram.

[karlcow]

Thanks @reinhart1010

so there is something logical about it. Gecko 65 has the issue. Probably a mozregression to run here.
I don't have an instagram account even a test one. My attempt has been shut down by facebook. 😩 Let's try again. Just tried to create an account with a different email address and yet another fail. So weird.

Same thing than last time.

1. The account doesn't get created.
2. But the email and the username are said being used.

I start wondering if it's possible to create an instagram account with Firefox. Trying with Safari… success… ah no… it requires a phone number for SMS… Sigh.

@wisniewskit @denschub do you have an instagram account to be able to diagnose?

[reinhart1010]

@karlcow I believe this is more about canvas compositing (graphics) which I am able to reproduce in other websites, such as https://pqina.nl/shiny/.

Instagram indeed uses canvas for stories. So I'd say this is the likely cause of issue.

[karlcow]

@reinhart1010 what is happening on https://pqina.nl/shiny/

Because I don't see anything wrong.

  if ('undefined' != typeof window && void 0 !== window.document && 'DeviceOrientationEvent' in window) {
    var i = Math.PI / 180,
    a = function (t, e) {
      var n = r.patterns[t];
      if (!n) return null;
      var i = document.createElement('canvas');
      i.width = n.width,
      i.height = n.height;
      var a = i.getContext('2d');
      return a.fillStyle = 'rgba(0, 0, 0, ' + (1 - e) + ')',
      a.fillRect(0, 0, i.width, i.height),
      a.drawImage(n, 0, 0),
      i
    },
    r = {
      orientationInitial: null,
      orientation: {
        alpha: null,
        beta: null,
        gamma: null
      },
      viewport: {
        width: window.innerWidth,
        height: window.innerHeight
      },
      origin: {
        x: 0,
        y: 0,
        z: 300
      },
      patterns: {
        noise: function (t, e) {
          var n = document.createElement('canvas');
          n.width = t,
          n.height = e;
          for (var i = n.getContext('2d'), a = 0; a < t; a++) for (var r = 0; r < e; r++) i.fillStyle = 'rgba(0, 0, 0, ' + Math.random() + ')',
          i.fillRect(a, r, 1, 1);
          return n
        }(64 * window.devicePixelRatio, 64 * window.devicePixelRatio)
      },
      drawers: [
      ]
    };

[karlcow]

Ah! I see it's a bit shoppy when you move the device (device orientation data)

    u = function () {
      !function () {
        if (r.orientationInitial) {
          var t = r.orientation,
          e = r.orientationInitial,
          n = r.origin,
          i = r.viewport,
          a = e.alpha - t.alpha,
          o = e.beta - t.beta,
          l = e.gamma - t.gamma,
          c = n.x,
          d = n.y,
          u = n.z;
          c = c * Math.cos( - p(a)) - d * Math.sin( - p(a)),
          d = (d = d * Math.cos( - p(a)) + c * Math.sin( - p(a))) * Math.cos( - p(o)) - u * Math.sin( - p(o)),
          u = (u = u * Math.cos( - p(o)) + d * Math.sin( - p(o))) * Math.cos( - p(l)) - c * Math.sin( - p(l)),
          c = c * Math.cos( - p(l)) + u * Math.sin( - p(l));
          var s = i.width / i.height,
          f = c / (300 * s),
          h = d / (300 / s);
          r.drawers.forEach(function (t) {
            return t.read()
          }),
          r.drawers.forEach(function (t) {
            return t.write(f, h)
          })
        }
      }(),

ok let's open a bug on Core instead.

[karlcow]

Close as duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=1539053