1377867 - androidify.com - WebGL to Gif is not performed correctly

Status: RESOLVED INVALID

(Web Compatibility :: Site Reports, defect, P3)

Description

[u534134]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:52.0) Gecko/20100101 Firefox/52.0
Build ID: 20170627155318

Steps to reproduce:

1 . opened https://androidify.com/it/#/gallery/b861da8df77f1c2a57f57917f9375cdc
2. Pressed the download button for save image: image are saved but gif is corrupted. The face of the gif is not showed correectly.

With Edge no issue is only Firefox that broke the downloaded gif


Actual results:

1 . opened https://androidify.com/it/#/gallery/b861da8df77f1c2a57f57917f9375cdc
2. Pressed the download button for save image: image are saved but gif is corrupted. The face of the gif is not showed correectly.

With Edge no issue is only Firefox that broke the downloaded gif


Expected results:

Gif should be downloaded correctly not crrupted.

Comment 1

[Daniel Stenberg [:bagder]]

This actually looks like the image gets generated wrongly in Firefox. I don't think it is a transfer related problem. I tried this link on Firefox 56 and Chrome 59 on Linux.

Chrome gets a 372682 bytes file downloaded. Firefox gets a 431599 version. (Same on repeated tries.) And the files are totally different already from the start. See the first 20 lines of my hexdump outputs:

$ hd Chrome-mark.gif | head -20
00000000  47 49 46 38 39 61 90 01  90 01 f7 00 00 00 00 00  |GIF89a..........|
00000010  0c 0a 06 1f 1c 18 22 20  1f 21 21 20 21 21 21 21  |......" .!! !!!!|
00000020  21 21 25 23 27 26 23 2c  27 24 2c 26 24 2c 27 24  |!!%#'&#,'$,&$,'$|
00000030  2d 2e 2c 2d 2e 2a 28 31  28 17 33 26 08 34 25 01  |-.,-.*(1(.3&.4%.|
00000040  37 27 00 37 27 00 38 28  00 3a 2a 03 45 38 1d 40  |7'.7'.8(.:*.E8.@|
00000050  39 31 3e 3c 3d 41 3f 42  46 45 45 48 46 45 48 47  |91><=A?BFEEHFEHG|
00000060  46 4a 49 48 49 46 44 53  45 31 5c 4b 32 64 54 3d  |FJIHIFDSE1\K2dT=|
00000070  5d 57 4e 57 56 54 55 60  54 42 8c 54 38 a2 54 49  |]WNWVTU`TB.T8.TI|
00000080  96 5b 6d 77 66 72 72 70  78 78 76 7c 7c 7d 82 82  |.[mwfrrpxxv||}..|
00000090  84 73 82 9d 43 84 f2 42  85 f3 42 85 f3 4e 8c f2  |.s..C..B..B..N..|
000000a0  5f 96 f1 6c 9e f0 7d a5  e7 93 a7 c7 a6 a7 ab a5  |_..l..}.........|
000000b0  a4 a3 a1 a1 a0 9d 9f 95  aa 9f 89 ba a0 7e c9 a3  |.............~..|
000000c0  6f cb a1 6a cb a1 69 cb  a1 69 cc a2 69 cc a2 6a  |o..j..i..i..i..j|
000000d0  cc a2 6a cc a2 6a d2 a6  6d d2 a6 6d d2 a6 6d d3  |..j..j..m..m..m.|
000000e0  a7 6e d2 a7 6e d3 a7 6c  dc ac 5c e2 b0 51 ea b6  |.n..n..l..\..Q..|
000000f0  3e f4 bb 1e f9 bc 0c fb  bc 06 f9 b4 0c f0 7f 34  |>..............4|
00000100  ea 5b 4b e9 52 45 e9 45  37 e9 43 35 e9 43 35 c2  |.[K.RE.E7.C5.C5.|
00000110  52 3a 96 64 42 97 6b 45  ab 76 48 b1 78 48 b1 78  |R:.dB.kE.vH.xH.x|
00000120  49 b1 79 49 ad 7b 4d ae  83 57 b5 8d 62 c3 97 6c  |I.yI.{M..W..b..l|
00000130  d6 9d 7a d3 aa 80 d7 b4  84 df bd 86 db b8 89 dd  |..z.............|

$ hd Firefox-mark.gif | head -20
00000000  47 49 46 38 39 61 90 01  90 01 f7 00 00 00 00 00  |GIF89a..........|
00000010  03 02 00 0d 0a 01 17 11  02 27 1d 05 30 25 0c 35  |.........'..0%.5|
00000020  27 04 36 27 00 37 27 00  37 27 00 37 27 00 38 28  |'.6'.7'.7'.7'.8(|
00000030  00 39 29 01 3b 2b 03 3f  2f 08 4a 3a 14 54 45 20  |.9).;+.?/.J:.TE |
00000040  5d 4e 29 5d 51 32 61 51  35 55 69 3b 44 9d 55 53  |]N)]Q2aQ5Ui;D.US|
00000050  a8 69 6e a3 7c 81 89 82  89 8c 88 92 91 8d 9e 9d  |.in.|...........|
00000060  9b a6 a5 a4 b2 b1 af be  be bd c3 c3 c2 c8 c8 c7  |................|
00000070  cd cd cc d3 d3 d2 d5 d5  d5 d6 d6 d5 d9 d9 d8 e4  |................|
00000080  e4 e4 f9 f9 f9 fe fe fe  fe fe fe fe fe fe fe fe  |................|
00000090  fe fe fe fe fe fe fe fe  fe fe fe fe fe fe fe fe  |................|
*
000000b0  fe fd fe fe fd fe fe fd  fe fe fd fe fe fd fd fd  |................|
000000c0  fd fd fd fc fd fd fc fd  fd fc fd fd fc fd fd fc  |................|
000000d0  fd fd fc fc fc fc fc fc  fc fc fc fc fc fc fb fb  |................|
000000e0  fb fb fb fb fb fa fa fa  fa fa fa fa fa fa fa f9  |................|
000000f0  f9 fa f9 f8 fb f9 f6 fb  f9 f6 fb f8 f5 fb f8 f4  |................|
00000100  fb f8 f4 fa f7 f4 f9 f7  f5 f7 f7 f6 f6 f6 f6 f6  |................|
00000110  f6 f6 f6 f6 f5 f5 f5 f5  f5 f5 f4 f5 f4 f4 f4 f4  |................|
00000120  f4 f4 f3 f3 f3 f3 f2 f2  f2 f1 f1 f1 f0 f0 f0 f0  |................|
00000130  ef ef ef ef ee ee ee ee  ee ed ed ed ed ec ec ec  |................|

Comment 2

[Gary Chen [:xeonchen]]

Hi Eric, I've tried using Chrome's user agent, but still get broken result.
Would you help confirm this is a compatibility issue or not?

Comment 3

[u534134]

Hi @Gary,
due to your message I tested with the last Chrome and the image is not broken, is right as in Edge.

Comment 4

[Gary Chen [:xeonchen]]

(In reply to Marco from comment #3)
> Hi @Gary,
> due to your message I tested with the last Chrome and the image is not
> broken, is right as in Edge.

Sorry I didn't make it clear, I mean Firefox but sending Chrome's User Agent string.

Comment 5

[Eric Tsai (no more review request accepted)]

I think it's a compatibility issue, using Firefox 56 with IE11/Edge UA string I could download correct gif, but Firefox/Chrome/Safari don't. Chrome 59 works well for me.

Comment 6

[Karl Dubost💡 :karlcow]

I'm not sure about this issue. 
Ah understood. To get a download  button you need a bigger viewport.
Original images are not GIF, but probably animated canvas. 

The download button is 
```html
<a ng-click="generateGif()" class="gifCreator"><img src="/assets/images/gallery/icon_download.svg"></a>
```

which is generating a Gif on the fly.
https://androidify.com/it/app.js?t=20170208171524
Once prettified in the devtools… this is a 388,738 lines of code…



```js
          t.generateGif = function () {
            t.gifGenerating = !0,
            'undefined' == typeof t.tile.androidDef.android.signature_move && (t.tile.androidDef.android.signature_move = l.getRandomActiveAnimation().name),
            a.createGIF(t.android.droid.model, t.tile.androidDef.android.signature_move, {
              progress: function (e) {
                t.gifProgress = e,
                t.$$phase || t.$apply()
              },
              complete: function (e) {
                var i = t.tile.androidDef.name,
                a = URL.createObjectURL(e),
                r = window.navigator.userAgent,
                n = r.indexOf('.NET ');
                if (n > 0) window.navigator.msSaveBlob(e, i + '.gif');
                 else {
                  var o = document.createElement('a');
                  o.setAttribute('href', a),
                  o.setAttribute('download', i + '.gif');
                  var s = document.createEvent('MouseEvents');
                  s.initMouseEvent('click', !0, !0, window, 1, 0, 0, 0, 0, !1, !1, !1, !1, 0, null),
                  o.dispatchEvent(s),
                  window.open(URL.createObjectURL(e))
                }
                t.gifGenerating = !1
              },
              error: function () {
                t.gifGenerating = !1
              }
            })
          },
```

which relies on createGIF


```js
              createGIF: function(r, n, d) {
                function c() {
                  var t = _ * S * w;
                  if (t <= n.duration) {
                    var e = F * (t / n.duration);
                    'function' == typeof d.progress && d.progress(e),
                      n.update(s.pose, r, t),
                      s.updatePose(),
                      a.render(),
                      p > 1 ? (l.height = m, l.width = f, h.drawImage(a.pixi.view, 0, 0, y, g, 0, 0, f, m), x.addFrame(h, T)) : x.addFrame(a.pixi.context, T),
                      ++_,
                      setTimeout(c, 1000 / 60)
                  } else x.render()
                }
                u || e();
                var p = 1 / t.devicePixelRatio,
                  m = 400,
                  f = 400,
                  g = f * p,
                  y = m * p;
                s.setModel(r),
                  n = o.Animations[n],
                  void 0 === n && (n = o.Animations.happy),
                  s.group.scale.set(1);
                var v = i({
                  height: s.getHeight(),
                  width: s.getWidth(),
                  x: 0,
                  y: 0
                }, {
                  height: g,
                  width: y,
                  x: 0,
                  y: 0
                });
                s.group.x = y / 2,
                  s.group.y = g / 2,
                  s.group.scale.set(v.scale),
                  n.apply(s),
                  s.devUpdateProp(),
                  a.pixi.transparent = !1,
                  a.stage.setBackgroundColor(16777215),
                  a.setSize(y, g);
                var x = new GIF({
                    workerScript: '/assets/scripts/gif.worker.js',
                    background: '#fff',
                    workers: 10,
                    quality: 1,
                    repeat: 0,
                    height: f,
                    width: m
                  }),
                  b = 18,
                  _ = 0,
                  F = 0.5,
                  w = o.Animation.ORIGINAL_FPS / b,
                  S = 1000 / b,
                  T = {
                    delay: S * w,
                    copy: !0
                  };
                'function' == typeof d.progress && d.progress(0.02),
                  x.on('progress', function(t) {
                    var e = F + (1 - F) * t;
                    'function' == typeof d.progress && d.progress(e)
                  }),
                  x.on('finished', function(t) {
                    'function' == typeof d.complete && (a.pixi.transparent = !0, d.complete(t))
                  }),
                  c()
              }
```

The GIFs are different obviously because the download feature a specific record of  the interactions with the character, which are slightly random. So there must be something in the way Firefox process the data which is not happening in Chrome.

It probably draws images in a Canvas before converting them.




PS: There is also Bug 1466441 for this site.

Comment 7

[Karl Dubost💡 :karlcow]

Let me change, the story about different gif and random actions. It saves the same GIF, but it is generated each time.

The script createGIF calls  GIF()
https://androidify.com/assets/scripts/gif.worker.js
https://gist.github.com/karlcow/439e4640ad6335821b67d07eff9d300e (once prettified)


Another interesting thing.
Firefox is requesting to save a file, while Chrome is just saving it. 
The blob is not working. blob:https://androidify.com/c8db4c4b-40ea-b94d-be25-84a72057f278

The image which has been generated in my case as transparency issues too. 
https://imgur.com/a/XbjACVi


So I don't think the GIF is corrupted, but probably the way the GIF is generated is faulty. Related to palettes? Or alpha channel?

This is using pixijs, which uses WebGL to draw things.  
And this issue seemed very close 
https://github.com/pixijs/pixi.js/issues/1636
but it has been solved by Bug 1159034

This one is still opened.
https://github.com/pixijs/pixi.js/issues/4496



The site is created by Google Creative Labs and https://www.larvalabs.com/
[e-mail]
http://twitter.com/larvalabs

Also on GitHub 
https://github.com/larvalabs

Comment 8

[Karl Dubost💡 :karlcow]

btw if I check the https://imgur.com/a/XbjACVi
in Chrome I get the same rendering issues. 
So the issue with the palette is when the GIF file is generated by the script.

Andrew, do you know who is knowledgeable enough with regards to the GIF format to identify what is the issue with the GIF in https://imgur.com/a/XbjACVi
So we can try to pinpoint which parts of the JS code above is creating the issue for users.

Thanks.

Comment 9

[Firefox Bug Husbandry Bot]

See bug 1547409. Moving webcompat whiteboard tags to keywords.

Comment 10

[Karl Dubost💡 :karlcow]

1. Go to https://androidify.com/en/#/gallery/b861da8df77f1c2a57f57917f9375cdc
   This now redirects to https://www.android.com/