1930126 - [webgpu] https://codepen.io/fleple/pen/zYwRrgy doesnt render anything and continuously flashes the demo

Status: RESOLVED FIXED

(Core :: Graphics: WebGPU, defect)

Description

[Mayank Bansal]

Go to https://codepen.io/fleple/pen/zYwRrgy

AR: Nothing is drawn on the screen. The whole demo-pane flashes
ER Not so. Chrome renders it.

Errors:

18:18:52.001 Content-Security-Policy: Ignoring ‘block-all-mixed-content’ because mixed content display upgrading makes block-all-mixed-content obsolete. zYwRrgy
18:18:54.003 Cookie “__cfruid” has been rejected because it is foreign and does not have the “Partitioned“ attribute. zYwRrgy
18:18:54.021 Partitioned cookie or storage access was provided to “https://cdpn.io/fleple/fullpage/zYwRrgy?view=” because it is loaded in the third-party context and dynamic state partitioning is enabled.

18:18:54.084 WebGL context was lost. maxRecommendedTextures.ts:26:43
18:18:54.121 injected firefox content.js:142:11
18:18:55.398 Uncaptured WebGPU error: Shader module creation failed: Parsing error
18:18:55.398
Encountered one or more errors while creating shader module
18:18:55.398
WebGPU compilation info for shader module (1 error(s), 0 warning(s), 0 info)
18:18:55.398 Uncaptured WebGPU error: Error matching ShaderStages(FRAGMENT) shader requirements against the pipeline, caused by: ShaderModule with '' label is invalid
18:18:55.514 Uncaptured WebGPU error: In a set_pipeline command, caused by: RenderPipeline with 'PIXI Pipeline' label is invalid
18:18:55.514 Uncaptured WebGPU error: Command encoder is locked by a previously created render/compute pass. Before recording any new commands, the pass must be ended.
18:18:55.514 Uncaptured WebGPU error: Command encoder is invalid
18:18:57.381
Unknown property ‘-moz-osx-font-smoothing’. Declaration dropped. global-8a8d68e2f8bd7800b9bf832d15246cc8e5d71fa5f49f67a9c4e3ea146185e1d4.css:502:27
18:18:57.381 Unknown pseudo-class or pseudo-element ‘-ms-expand’. Ruleset ignored due to bad selector. global-8a8d68e2f8bd7800b9bf832d15246cc8e5d71fa5f49f67a9c4e3ea146185e1d4.css:1618:16
18:18:57.382 Unknown pseudo-class or pseudo-element ‘-moz-progress-value’. Ruleset ignored due to bad selector. global-8a8d68e2f8bd7800b9bf832d15246cc8e5d71fa5f49f67a9c4e3ea146185e1d4.css:2344:27
18:18:57.400
Unknown property ‘-moz-osx-font-smoothing’. Declaration dropped. everypage-e2356b35.css:1:86
18:18:57.402
Unknown property ‘-moz-osx-font-smoothing’. Declaration dropped. everypage-e2356b35.css:1:81800
18:18:57.402
Error in parsing value for ‘color’. Declaration dropped. everypage-e2356b35.css:1:89599
18:18:57.402 Unknown pseudo-class or pseudo-element ‘-ms-expand’. Ruleset ignored due to bad selector. everypage-e2356b35.css:1:89851
18:18:57.403
Unknown property ‘-moz-osx-font-smoothing’. Declaration dropped. everypage-e2356b35.css:1:105345
18:18:57.403
Unknown property ‘-moz-osx-font-smoothing’. Declaration dropped. everypage-e2356b35.css:1:119088
18:18:57.403
Unknown property ‘-moz-osx-font-smoothing’. Declaration dropped. everypage-e2356b35.css:1:132287
18:18:57.403
Unknown property ‘-moz-osx-font-smoothing’. Declaration dropped. everypage-e2356b35.css:1:135190
18:18:57.403
Unknown property ‘-moz-osx-font-smoothing’. Declaration dropped. everypage-e2356b35.css:1:137292
18:18:57.403
Unknown property ‘scrollbar-face-color’. Declaration dropped. everypage-e2356b35.css:1:139175
18:18:57.403
Unknown property ‘scrollbar-track-color’. Declaration dropped. everypage-e2356b35.css:1:139216
18:18:57.404
Unknown property ‘margin-trim’. Declaration dropped. everypage-e2356b35.css:1:151659
18:18:57.404
Unknown property ‘-moz-border-radius’. Declaration dropped. everypage-e2356b35.css:1:155307
Elements matching selector: .CodeEditor5-module_root-NNRIe .CodeMirror pre.CodeMirror-line, .CodeEditor5-module_root-NNRIe .CodeMirror pre.CodeMirror-line-like
NodeList []
18:18:57.404
Unknown property ‘-moz-osx-font-smoothing’. Declaration dropped. everypage-e2356b35.css:1:167174
18:18:57.407
Error in parsing value for ‘text-wrap’. Declaration dropped. everypage-e2356b35.css:1:255747
18:18:57.407
Error in parsing value for ‘border-radius’. Declaration dropped. everypage-e2356b35.css:1:259634
18:18:57.407
Error in parsing value for ‘text-wrap’. Declaration dropped. everypage-e2356b35.css:1:262145
18:18:57.408
Error in parsing value for ‘cursor’. Declaration dropped. everypage-e2356b35.css:1:293531
18:18:57.423 Ruleset ignored due to bad selector. editor-9965a771b4b61d73451d0a0347dc271a5e2742155b1f04c44328646feab3f66c.css:2214:9
18:18:57.424
Expected color but found ‘none’. Error in parsing value for ‘scrollbar-color’. Declaration dropped. editor-9965a771b4b61d73451d0a0347dc271a5e2742155b1f04c44328646feab3f66c.css:3063:22
18:18:57.448
GET
https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0&width=80&height=80
[HTTP/1.1 200 OK 0ms]

18:19:03.174 Download the Apollo DevTools for a better development experience: https://addons.mozilla.org/en-US/firefox/addon/apollo-developer-tools/ vendor-18edf1dfe16da6311df8.chunk.js:1:1784338

Comment 1

[Mayank Bansal]

Attachment: about:support

Comment 2

[Erich Gubler [:ErichDonGubler] (he/him)]

If you expand the error in the console, the shader compilation error states:

Shader '' parsing error: invalid switch value
   ┌─ wgsl:60:8
   │
60 │   case 0:{
   │        ^ expected unsigned integer
   │
   = note: suffix the integer with a `u`: '0u'

This is bug 1829879.

Comment 3

[Andy Leiserson [:aleiserson]]

This is working for me now with the fix for wgpu#7225.