www.google.com – Unable to view user’s review photos

[softvision-oana-arbuzov]

URL: https://google.com
Browser / Version: Firefox Mobile Nightly 55.0a1 (2017-06-06) - Chome UA
Operating System: Samsung Galaxy S6 (Android 7.0) - Resolution 1440 x 2560 pixels (~577 ppi pixel density)
Problem type: Mobile site is not usable

Steps to Reproduce

1. Navigate to: https://goo.gl/2SiYVI.
2. Scroll down to a user review that uploaded photos.
3. Tap a photo and observe behavior.

Expected Behavior:
Photo is displayed.

Actual Behavior:
Photo is not displayed. A loading spinner is displayed indefinitely.

Note:

1. Not reproducible on Chrome (Mobile) 58.0.3029.83 and Opera (Mobile) 42.7.2246.114996.
2. Error: 06-07 15:06:02.180 15416-15499/? E/GeckoConsole: [JavaScript Error: "TypeError: Argument 1 of WebGLRenderingContext.shaderSource is not an object." {file: "https://www.google.ro/xjs/_/js/k=xjs.uv.en.YxCh7sJcVvA.O/m=v/rt=j/d=1/t=zcms/rs=ACT90oF0KsJ6_3uETvphxxHjmwteZ9W3EA" line: 462}] uv_.shaderSource@https://www.google.ro/xjs/_/js/k=xjs.uv.en.YxCh7sJcVvA.O/m=v/rt=j/d=1/t=zcms/rs=ACT90oF0KsJ6_3uETvphxxHjmwteZ9W3EA:462:420 uv_3x@https://www.google.ro/xjs/_/js/k=xjs.uv.en.YxCh7sJcVvA.O/m=sy13,syv,syz,sy1g,sy4e,whr/rt=j/d=0/rs=ACT90oF0KsJ6_3uETvphxxHjmwteZ9W3EA:44:306 uv_0x@https://www.google.ro/xjs/_/js/k=xjs.uv.en.YxCh7sJcVvA.O/m=sy13,syv,syz,sy1g,sy4e,whr/rt=j/d=0/rs=ACT90oF0KsJ6_3uETvphxxHjmwteZ9W3EA:44:446 uv_4x@https://www.google.ro/xjs/_/js/k=xjs.uv.en.YxCh7sJcVvA.O/m=sy13,syv,syz,sy1g,sy4e,whr/rt=j/d=0/rs=ACT90oF0KsJ6_3uETvphxxHjmwteZ9W3EA:44:611 uv_.im@https://www.google.ro/xjs/_/js/k=xjs.uv.en.YxCh7sJcVvA.O/m=sy13,syv,syz,sy1g,sy4e,whr/rt=j/d=0/rs=ACT90oF0KsJ6_3uETvphxxHjmwteZ9W3EA:80:129 uv_dC.prototype.Rb@https://www.google.ro/xjs/_/js/k=xjs.uv.en.Y
3. Screenshot attached.

Watchers:
@softvision-sergiulogigan
@softvision-oana-arbuzov

sv; gs

From webcompat.com with ❤️

[karlcow]

There are missing steps, such as

1. searching for a restaurant.
2. tap on the name of one. The main page is displayed.
3. tap on reviews tab beside the overview.
4. scroll down for a comment with photos.
5. tap the photo.

I indeed get a spinner.

This is not happening on desktop + responsive + chrome ua. It is working.

I wonder if it's related to touchstart handling.

[karlcow]

ah no WebGL…

10:26:03.455 Error: WebGL warning: Exceeded 2 live WebGL contexts for this principal, losing the least recently used one. rs=ACT90oGOnhrwgWqwjToBuyJJPG9lkoN4kA:390:322
10:26:04.253 Error: WebGL warning: Exceeded 2 live WebGL contexts for this principal, losing the least recently used one. rs=ACT90oGOnhrwgWqwjToBuyJJPG9lkoN4kA:191:270
10:26:07.207 TypeError: Argument 1 of WebGLRenderingContext.shaderSource is not an object.[Learn More] rs=ACT90oGOnhrwgWqwjToBuyJJPG9lkoN4kA:458:420
	uv_.shaderSource https://www.google.com/xjs/_/js/k=xjs.uv.en.rZ3L-g5tHsE.O/m=v/rt=j/d=1/t=zcms/rs=ACT90oGOnhrwgWqwjToBuyJJPG9lkoN4kA:458:420
	uv_Yx https://www.google.com/xjs/_/js/k=xjs.uv.en.rZ3L-g5tHsE.O/m=sy13,syv,syz,sy1g,sy4e,whr/rt=j/d=0/rs=ACT90oGOnhrwgWqwjToBuyJJPG9lkoN4kA:44:306
	uv_Vx https://www.google.com/xjs/_/js/k=xjs.uv.en.rZ3L-g5tHsE.O/m=sy13,syv,syz,sy1g,sy4e,whr/rt=j/d=0/rs=ACT90oGOnhrwgWqwjToBuyJJPG9lkoN4kA:44:446
	uv_Zx https://www.google.com/xjs/_/js/k=xjs.uv.en.rZ3L-g5tHsE.O/m=sy13,syv,syz,sy1g,sy4e,whr/rt=j/d=0/rs=ACT90oGOnhrwgWqwjToBuyJJPG9lkoN4kA:44:611
	uv_.lm https://www.google.com/xjs/_/js/k=xjs.uv.en.rZ3L-g5tHsE.O/m=sy13,syv,syz,sy1g,sy4e,whr/rt=j/d=0/rs=ACT90oGOnhrwgWqwjToBuyJJPG9lkoN4kA:80:129
	uv_$B.prototype.Rb https://www.google.com/xjs/_/js/k=xjs.uv.en.rZ3L-g5tHsE.O/m=sy13,syv,syz,sy1g,sy4e,whr/rt=j/d=0/rs=ACT90oGOnhrwgWqwjToBuyJJPG9lkoN4kA:21:346
	uv_.Rb https://www.google.com/xjs/_/js/k=xjs.uv.en.rZ3L-g5tHsE.O/m=syp,syy,sys,syx,sy1c,sy1w,sy1x,sy16,sy19,syr,sy1d,syu,sy20,sy1y,sy2c,sy2j,sy14,sy17,sy1n,sy1o,sy1z,sy22,sy27,sy29,sy2e,sy2g,sy2w,sy3r,sy3s,sy3t,sy3x,sy3y,sy3z,sy40,sy2k,sye,sy1e,sy1f,sy2z,sy3u,sy3w,sy43,pti,sy49,sy45,sy48,phr,phi/rt=j/d=0/rs=ACT90oGOnhrwgWqwjToBuyJJPG9lkoN4kA:271:153
	uv_.Rb https://www.google.com/xjs/_/js/k=xjs.uv.en.rZ3L-g5tHsE.O/m=syp,syy,sys,syx,sy1c,sy1w,sy1x,sy16,sy19,syr,sy1d,syu,sy20,sy1y,sy2c,sy2j,sy14,sy17,sy1n,sy1o,sy1z,sy22,sy27,sy29,sy2e,sy2g,sy2w,sy3r,sy3s,sy3t,sy3x,sy3y,sy3z,sy40,sy2k,sye,sy1e,sy1f,sy2z,sy3u,sy3w,sy43,pti,sy49,sy45,sy48,phr,phi/rt=j/d=0/rs=ACT90oGOnhrwgWqwjToBuyJJPG9lkoN4kA:323:641
	uv_tO.prototype.render https://www.google.com/xjs/_/js/k=xjs.uv.en.rZ3L-g5tHsE.O/m=sy3,sy35,sy36,sy37,sy38,sy39,sy3a,sy3b,sy3c,sy2,sy4,syg,syi,sym,sy10,sy15,sy1s,sy1v,sy2o,sy2p,sy2v,sy33,sy34,sy3d,sy3e,sy3f,sy3g,sy3j,sy3k,sy3l,sy3m,ivi/rt=j/d=0/rs=ACT90oGOnhrwgWqwjToBuyJJPG9lkoN4kA:36:574
	uv_Ep https://www.google.com/xjs/_/js/k=xjs.uv.en.rZ3L-g5tHsE.O/m=v/rt=j/d=1/t=zcms/rs=ACT90oGOnhrwgWqwjToBuyJJPG9lkoN4kA:359:547
	uv_Ap.prototype.mb https://www.google.com/xjs/_/js/k=xjs.uv.en.rZ3L-g5tHsE.O/m=v/rt=j/d=1/t=zcms/rs=ACT90oGOnhrwgWqwjToBuyJJPG9lkoN4kA:356:414
	uv_tp https://www.google.com/xjs/_/js/k=xjs.uv.en.rZ3L-g5tHsE.O/m=v/rt=j/d=1/t=zcms/rs=ACT90oGOnhrwgWqwjToBuyJJPG9lkoN4kA:353:207
	uv_up/this.ha https://www.google.com/xjs/_/js/k=xjs.uv.en.rZ3L-g5tHsE.O/m=v/rt=j/d=1/t=zcms/rs=ACT90oGOnhrwgWqwjToBuyJJPG9lkoN4kA:352:367
	uv_cd/b.port1.onmessage https://www.google.com/xjs/_/js/k=xjs.uv.en.rZ3L-g5tHsE.O/m=v/rt=j/d=1/t=zcms/rs=ACT90oGOnhrwgWqwjToBuyJJPG9lkoN4kA:58:59
10:32:32.459 TypeError: Argument 1 of WebGLRenderingContext.shaderSource is not an object.[Learn More] rs=ACT90oGOnhrwgWqwjToBuyJJPG9lkoN4kA:458:420
	uv_.shaderSource https://www.google.com/xjs/_/js/k=xjs.uv.en.rZ3L-g5tHsE.O/m=v/rt=j/d=1/t=zcms/rs=ACT90oGOnhrwgWqwjToBuyJJPG9lkoN4kA:458:420
	uv_Yx https://www.google.com/xjs/_/js/k=xjs.uv.en.rZ3L-g5tHsE.O/m=sy13,syv,syz,sy1g,sy4e,whr/rt=j/d=0/rs=ACT90oGOnhrwgWqwjToBuyJJPG9lkoN4kA:44:306
	uv_Vx https://www.google.com/xjs/_/js/k=xjs.uv.en.rZ3L-g5tHsE.O/m=sy13,syv,syz,sy1g,sy4e,whr/rt=j/d=0/rs=ACT90oGOnhrwgWqwjToBuyJJPG9lkoN4kA:44:446
	uv_Zx https://www.google.com/xjs/_/js/k=xjs.uv.en.rZ3L-g5tHsE.O/m=sy13,syv,syz,sy1g,sy4e,whr/rt=j/d=0/rs=ACT90oGOnhrwgWqwjToBuyJJPG9lkoN4kA:44:611
	uv_.lm https://www.google.com/xjs/_/js/k=xjs.uv.en.rZ3L-g5tHsE.O/m=sy13,syv,syz,sy1g,sy4e,whr/rt=j/d=0/rs=ACT90oGOnhrwgWqwjToBuyJJPG9lkoN4kA:80:129
	uv_$B.prototype.Rb https://www.google.com/xjs/_/js/k=xjs.uv.en.rZ3L-g5tHsE.O/m=sy13,syv,syz,sy1g,sy4e,whr/rt=j/d=0/rs=ACT90oGOnhrwgWqwjToBuyJJPG9lkoN4kA:21:346
	uv_.Rb https://www.google.com/xjs/_/js/k=xjs.uv.en.rZ3L-g5tHsE.O/m=syp,syy,sys,syx,sy1c,sy1w,sy1x,sy16,sy19,syr,sy1d,syu,sy20,sy1y,sy2c,sy2j,sy14,sy17,sy1n,sy1o,sy1z,sy22,sy27,sy29,sy2e,sy2g,sy2w,sy3r,sy3s,sy3t,sy3x,sy3y,sy3z,sy40,sy2k,sye,sy1e,sy1f,sy2z,sy3u,sy3w,sy43,pti,sy49,sy45,sy48,phr,phi/rt=j/d=0/rs=ACT90oGOnhrwgWqwjToBuyJJPG9lkoN4kA:271:153
	uv_.Rb https://www.google.com/xjs/_/js/k=xjs.uv.en.rZ3L-g5tHsE.O/m=syp,syy,sys,syx,sy1c,sy1w,sy1x,sy16,sy19,syr,sy1d,syu,sy20,sy1y,sy2c,sy2j,sy14,sy17,sy1n,sy1o,sy1z,sy22,sy27,sy29,sy2e,sy2g,sy2w,sy3r,sy3s,sy3t,sy3x,sy3y,sy3z,sy40,sy2k,sye,sy1e,sy1f,sy2z,sy3u,sy3w,sy43,pti,sy49,sy45,sy48,phr,phi/rt=j/d=0/rs=ACT90oGOnhrwgWqwjToBuyJJPG9lkoN4kA:323:641
	uv_tO.prototype.render https://www.google.com/xjs/_/js/k=xjs.uv.en.rZ3L-g5tHsE.O/m=sy3,sy35,sy36,sy37,sy38,sy39,sy3a,sy3b,sy3c,sy2,sy4,syg,syi,sym,sy10,sy15,sy1s,sy1v,sy2o,sy2p,sy2v,sy33,sy34,sy3d,sy3e,sy3f,sy3g,sy3j,sy3k,sy3l,sy3m,ivi/rt=j/d=0/rs=ACT90oGOnhrwgWqwjToBuyJJPG9lkoN4kA:36:574
	uv_Ep https://www.google.com/xjs/_/js/k=xjs.uv.en.rZ3L-g5tHsE.O/m=v/rt=j/d=1/t=zcms/rs=ACT90oGOnhrwgWqwjToBuyJJPG9lkoN4kA:359:547
	uv_Ap.prototype.mb https://www.google.com/xjs/_/js/k=xjs.uv.en.rZ3L-g5tHsE.O/m=v/rt=j/d=1/t=zcms/rs=ACT90oGOnhrwgWqwjToBuyJJPG9lkoN4kA:356:414
	uv_tp https://www.google.com/xjs/_/js/k=xjs.uv.en.rZ3L-g5tHsE.O/m=v/rt=j/d=1/t=zcms/rs=ACT90oGOnhrwgWqwjToBuyJJPG9lkoN4kA:353:207
	uv_up/this.ma https://www.google.com/xjs/_/js/k=xjs.uv.en.rZ3L-g5tHsE.O/m=v/rt=j/d=1/t=zcms/rs=ACT90oGOnhrwgWqwjToBuyJJPG9lkoN4kA:352:321

[karlcow]

Maybe related to https://bugzilla.mozilla.org/show_bug.cgi?id=1341979

[softvision-oana-arbuzov]

I've updated the issue with the correct link https://goo.gl/2SiYVI. It should work now.

[wisniewskit]

I can't even tap on the photos on my phone; it does nothing, including no messages being logged to the console. Desktop Firefox in responsive design mode does work, and the problem seems to be on actual Android devices, no touchstart handler is ever added to the thumbnails (while one is added for responsive design mode, on the div._JTg elements inside of the g-scrolling-carousel elements for the image thumbnails).

[wisniewskit]

Hmm. This is a weird one. The error is indeed what @karlcow reported: TypeError: Argument 1 of WebGLRenderingContext.shaderSource is not an object

I've added some logging to see what the arguments are for the function call that's throwing the TypeError, and I saw this output:

called with arguments: WebGLShader {  }, "attribute vec2 a;uniform vec4 b;uniform mat4 c;varying vec2 d;void main(){gl_Position=c*vec4(a.x,a.y,1,1);d=a.xy*b.xy+b.zw;}"

called with arguments: WebGLShader {  }, "precision highp float;uniform float e,f;uniform sampler2D g;varying vec2 d;float j(){if(f==0.)return 1.;else{vec2 h=abs(d-.5)-.5+f;return 1.-length(max(h,0.))/f;}}void main(){vec4 h=texture2D(g,d);float i=j();gl_FragColor=vec4(h.rgb,e*i);}"

called with arguments: null, "attribute vec2 a;uniform vec4 b;uniform mat4 c;varying vec2 d;void main(){gl_Position=c*vec4(a.x,a.y,1,1);d=a.xy*b.xy+b.zw;}"

So the first two times, the arguments are correct, but for the third call, the WebGLShader is null. However, it doesn't seem to be caused by nightly's shader validation, as turning on webgl.bypass-shader-validation in about:config does not help matters.

I wonder if it's related to the other warning I'm seeing logged:
Error: WebGL warning: Exceeded 2 live WebGL contexts for this principal, losing the least recently used one.

Also note that when I wrap the failing call in a try/catch block (and then do the same for the related errors which snowball from doing so), then the image seems to load just fine, so I wonder what the point of the shaders is.

I'll see if I can't build a custom nightly that raises the limit to 16, as I see hints online that 16 may be the limit of WebGL contexts that Chrome enforces, rather than 2.

[wisniewskit]

Ah, indeed a custom build of Fennec with the WebGL context limit bumped up to 16 is able to view the page. I see that in the source code, the limit was set to 2 because some devices don't support more than 8 overall contexts, but if Chrome is now using a higher limit, then perhaps it would be better to adopt their heuristics in the interests of webcompat. I've filed bug 1421481 to investigate this.

[karlcow]

Thanks a lot.
Let's close as a duplicate.

[miketaylr]

Update: https://bugzilla.mozilla.org/show_bug.cgi?id=1421481 has landed on inbound (likely in a Nightly within a day or two, unless it bounces) to match what Chrome Mobile is doing for contexts.

[wisniewskit]

I've just confirmed that the patch in the bug Mike just mentioned will fix the issue here.