Modal: Detect and message broken WebGL (iOS/iPadOS 18.7.2 build 22H123)

[coderabbitai]

Summary

Safari/WebKit on iOS/iPadOS 18.7.2 build 22H123 claims WebGL support, but GL resource creation/compilation fails (buffers/framebuffers/shaders). OmniBlocks currently mounts Stage when Renderer.isSupported() is true and then crashes with a generic error.

We need a hardened detection + a user-friendly modal that explains “WebGL appears to be broken” and guides users (esp. iOS 18.7.2) to update.

Backlink: #364

Why

• Renderer.isSupported() is optimistic on affected Safari; context exists but resources fail.
• Prevents crash; provides actionable guidance (update to fixed build 22H124, try another browser, etc.).

Scope

1. Detection (smoke test, cached once per session)

• Create canvas + WebGL context.
• Create & bind buffer; upload tiny data.
• Create framebuffer.
• Compile+link minimal shaders; verify COMPILE/LINK status.
• Verify gl.getParameter(gl.VERSION) is truthy.

2. Modal (new, matches WebGL-not-supported modal styling)

• Title: “WebGL appears to be broken”
• Text: Browser reports support but it’s malfunctioning (likely browser bug/driver issue).
• iOS specific callout: “If you’re on iOS/iPadOS 18.7.2, update to build 22H124 (Settings → General → Software Update; turn off Beta Updates first).”
• Link to Status & Issues wiki.

3. UA-based iOS version hint (optional, not for gating)

• Parse navigator.userAgent to detect iOS/iPadOS 18.7.2 and show a short note.
• We cannot detect Apple ‘build numbers’ on the web; instruct user where to find it in Settings.

Non-goals

• Do not change renderer internals.
• Do not block on exact Apple build detection (not exposed to JS).

Acceptance criteria

• Users on broken Safari builds see the “WebGL broken” modal instead of a crash.
• Modal matches existing modal visuals.
• Detection runs once per session (cached).
• Healthy browsers still mount Stage normally.
• Existing “WebGL not supported” flow remains unchanged.

Tasks

• src/lib/tw-environment-support-prober.js: add canActuallyUseWebGL() smoke test; cache result; require both Renderer.isSupported() && smoke test.
• New WebGlBrokenModal (component + container + CSS) mirroring existing modal layout; copy adjusted.
• Stage wrapper: if smoke test fails, show WebGlBrokenModal; otherwise mount Stage.
• UA helper for iOS version hint (no build detection).
• Link modal to wiki: Status_and_Issues.
• Manual verify on iPadOS 18.7.2 (22H123 should show modal; 22H124 should pass).
• Add minimal telemetry in devtools (e.g., window.__omni.webglProbe with failed step) for triage (optional).

References

• Tracking discussion: Broken on safari #364
• WebGL conformance results (repo root): webgl-conformance-2.0.1.beta.txt
• iOS 18.7.2 22H123 shader/ctx failures (community reports) and fix in 22H124

[traycerai]

Plan

Observations

The codebase uses Renderer.isSupported() from scratch-render which is optimistic on broken Safari builds. The existing flow shows BrowserModal when isBrowserSupported() returns false, and the StageWrapper conditionally renders the Stage based on isRendererSupported(). The modal system uses both Redux-managed modals and directly rendered ReactModal components for blocking errors. The existing webgl-modal component is unused in the current flow - instead, BrowserModal handles WebGL not supported cases. The new broken WebGL modal should be shown between the browser support check and Stage mounting.

Approach

The implementation adds a hardened WebGL smoke test that detects broken WebGL implementations (like iOS 18.7.2 build 22H123) and displays a user-friendly modal with actionable guidance. The approach follows the existing modal patterns in the codebase, using ReactModal directly for blocking error modals. The smoke test runs once per session and is cached, checking actual WebGL resource creation beyond the optimistic Renderer.isSupported() check. The new modal matches the existing WebGL modal styling and includes iOS-specific guidance when applicable.

Reasoning

I explored the codebase structure, examined the existing environment support prober, studied the modal system and patterns, analyzed how WebGL detection currently works, reviewed the Stage wrapper mounting logic, and identified where the new smoke test and modal should be integrated into the existing flow.

Proposed File Changes

📄 src/lib/tw-environment-support-prober.js ^(MODIFY) 🔗

Add a new exported function canActuallyUseWebGL() that performs a comprehensive smoke test of WebGL functionality. The function should:

1. Return the cached result if already tested (use a module-level variable cachedWebGLSmokeTest initialized to null)
2. First check if isRendererSupported() returns false - if so, cache and return false immediately (no point testing if WebGL isn't supported at all)
3. Create a temporary canvas element and get a WebGL context (try 'webgl2' first, then 'webgl', then 'experimental-webgl')
4. If context creation fails, cache false and return
5. Perform the following smoke tests on the context:
   • Create and bind a buffer using gl.createBuffer() and gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
   • Upload tiny data to the buffer using gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0, 0]), gl.STATIC_DRAW)
   • Create a framebuffer using gl.createFramebuffer()
   • Compile a minimal vertex shader (e.g., void main() { gl_Position = vec4(0.0, 0.0, 0.0, 1.0); })
   • Compile a minimal fragment shader (e.g., void main() { gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); })
   • Check shader compilation status using gl.getShaderParameter(shader, gl.COMPILE_STATUS)
   • Create a program, attach shaders, link it, and verify link status using gl.getProgramParameter(program, gl.LINK_STATUS)
   • Verify gl.getParameter(gl.VERSION) returns a truthy value
6. If any step fails or throws an exception, cache false and return false
7. If all tests pass, cache true and return true
8. Wrap the entire test in a try-catch block to handle any unexpected errors
9. Add optional telemetry: set window.__omni = window.__omni || {}; window.__omni.webglProbe = {passed: boolean, failedStep: string} for debugging

Also add a helper function detectIOSVersion() that:

1. Parses navigator.userAgent to detect iOS/iPadOS version
2. Returns an object with {isIOS: boolean, version: string | null} where version is like '18.7.2'
3. Use regex to match patterns like 'iPhone OS 18_7_2' or 'iPad; CPU OS 18_7_2'
4. Note: Apple build numbers (like 22H123) are not exposed to JavaScript, so don't attempt to detect them

📁 src/components/webgl-broken-modal ^(NEW) 🔗

Create a new directory to house the WebGL broken modal component files.

📄 src/components/webgl-broken-modal/webgl-broken-modal.jsx ^(NEW) 🔗

References

• 📄 src/components/browser-modal/browser-modal.jsx
• 📄 src/components/webgl-modal/webgl-modal.jsx
• 📄 src/lib/tw-environment-support-prober.js ^(MODIFY)

Create the WebGL broken modal component following the pattern from src/components/browser-modal/browser-modal.jsx and src/components/webgl-modal/webgl-modal.jsx.

The component should:

1. Import React, ReactModal, Box, PropTypes, and react-intl utilities
2. Import styles from './webgl-broken-modal.css'
3. Import the iOS detection helper from src/lib/tw-environment-support-prober.js
4. Define messages using defineMessages for i18n:
   • label: 'WebGL Appears to be Broken'
   • description: 'Browser reports WebGL support but it's malfunctioning. This is likely a browser bug or graphics driver issue.'
   • iosCallout: 'If you're on iOS/iPadOS 18.7.2, update to build 22H124 or later. Go to Settings → General → Software Update. If you see Beta Updates, turn it off first.'
   • tryAnother: 'Try updating your browser, updating graphics drivers, restarting your device, or using a different browser.'
   • statusLink: 'For more information, see the Status & Issues page.'
5. Use the iOS detection helper to conditionally show iOS-specific guidance
6. Render a ReactModal with:
   • isOpen={true}
   • className and overlayClassName from styles
   • contentLabel from intl.formatMessage
   • onRequestClose={props.onBack}
7. Include an illustration Box (similar to browser-modal) with a colored background
8. Include a body Box with:
   • h2 title with the label message
   • Paragraph explaining the issue
   • Conditional paragraph for iOS 18.7.2 users (if detected)
   • Paragraph with general troubleshooting steps
   • Link to Status & Issues wiki page (use the GitHub wiki URL pattern from the ticket)
   • Back button in a buttonRow Box
9. Support RTL layout via props.isRtl
10. Export with injectIntl HOC

Follow the exact structure and styling patterns from src/components/browser-modal/browser-modal.jsx.

📄 src/components/webgl-broken-modal/webgl-broken-modal.css ^(NEW) 🔗

References

• 📄 src/components/browser-modal/browser-modal.css
• 📄 src/components/webgl-modal/webgl-modal.css

Create the CSS file for the WebGL broken modal, copying the structure from src/components/browser-modal/browser-modal.css and src/components/webgl-modal/webgl-modal.css.

The CSS should include:

1. Import statements for colors, units, typography, and z-index from '../../css/'
2. .modal-overlay class with fixed positioning, full viewport coverage, z-index from $z-index-modal, and background-color from $ui-modal-overlay
3. .modal-content class with centered positioning (margin: 100px auto), border, border-radius, width: 500px, and other styling matching the browser-modal pattern
4. .illustration class with width: 100%, height: 100px (or 208px to match webgl-modal), background-color from theme variables (e.g., $looks-secondary or $control-primary)
5. RTL support: [dir="rtl"] .illustration with transform: scaleX(-1)
6. .body class with background, padding, text-align: center, and flex layout
7. .button-row class for button container with flex layout and centered alignment
8. Button styling within .button-row
9. .faq-link and .faq-link-text classes for styled links
10. .ios-callout class for highlighting iOS-specific guidance (optional, can use existing paragraph styling)

Match the visual style of existing error modals to maintain consistency.

📄 src/containers/webgl-broken-modal.jsx ^(NEW) 🔗

References

• 📄 src/containers/webgl-modal.jsx
• 📄 src/components/webgl-broken-modal/webgl-broken-modal.jsx ^(NEW)

Create the container component for the WebGL broken modal, following the pattern from src/containers/webgl-modal.jsx.

The container should:

1. Import React and PropTypes
2. Import the WebGlBrokenModalComponent from '../components/webgl-broken-modal/webgl-broken-modal.jsx'
3. Create a class component WebGlBrokenModal that:
   • Has a handleCancel method that calls window.history.back()
   • Renders WebGlBrokenModalComponent with isRtl prop and onBack={this.handleCancel}
4. Define propTypes for isRtl (bool)
5. Export the component as default

This container handles the modal's close behavior and passes through RTL support.

📄 src/reducers/modals.js ^(MODIFY) 🔗

Add the new WebGL broken modal to the Redux modals system:

1. Add a new constant: const MODAL_WEBGL_BROKEN = 'webglBrokenModal';
2. Add the modal to initialState: [MODAL_WEBGL_BROKEN]: false
3. Create action creators:
   • const openWebGlBrokenModal = function () { return openModal(MODAL_WEBGL_BROKEN); };
   • const closeWebGlBrokenModal = function () { return closeModal(MODAL_WEBGL_BROKEN); };
4. Export the new action creators in the export block at the bottom

Follow the exact pattern used for other modals like MODAL_INVALID_PROJECT or MODAL_UNKNOWN_PLATFORM.

📄 src/components/gui/gui.jsx ^(MODIFY) 🔗

References

• 📄 src/containers/webgl-broken-modal.jsx ^(NEW)
• 📄 src/lib/tw-environment-support-prober.js ^(MODIFY)

Integrate the WebGL broken modal into the main GUI component:

1. Add import for the new modal: import WebGlBrokenModal from '../../containers/webgl-broken-modal.jsx';
2. Import the smoke test function: Update the existing import from tw-environment-support-prober to include canActuallyUseWebGL
3. Add a new prop webglBrokenModalVisible to the component's destructured props (around line 162)
4. Add the prop to propTypes (around line 558): webglBrokenModalVisible: PropTypes.bool
5. In the render method, add the WebGlBrokenModal to the alwaysEnabledModals fragment (around line 196):

   {webglBrokenModalVisible && <WebGlBrokenModal />}
   

6. Update the condition for showing BrowserModal (around line 259) to also check the smoke test:
   • Change from: {isBrowserSupported() ? null : (<BrowserModal isRtl={isRtl} />)}
   • To: {(isBrowserSupported() && canActuallyUseWebGL()) ? null : (<BrowserModal isRtl={isRtl} />)}
   • This ensures BrowserModal shows for both "not supported" and "broken" cases as a fallback
7. Update the StageWrapper isRendererSupported prop (around lines 216 and 454) to use the smoke test:
   • Change from: isRendererSupported={isRendererSupported()}
   • To: isRendererSupported={isRendererSupported() && canActuallyUseWebGL()}

Note: The modal visibility will be controlled by Redux state, but the actual triggering logic should be in a parent component or initialization code that checks the smoke test and dispatches the openWebGlBrokenModal action if needed.

📄 src/playground/render-interface.jsx ^(MODIFY) 🔗

References

• 📄 src/lib/tw-environment-support-prober.js ^(MODIFY)

Update the playground interface to use the WebGL smoke test:

1. Update the import from tw-environment-support-prober to include canActuallyUseWebGL
2. Update the condition for showing BrowserModal (around line 313-315):
   • Change from: {isBrowserSupported() ? null : (<BrowserModal isRtl={isRtl} />)}
   • To: {(isBrowserSupported() && canActuallyUseWebGL()) ? null : (<BrowserModal isRtl={isRtl} />)}

This ensures the playground also respects the smoke test and shows the error modal when WebGL is broken.

Note: The playground might need additional integration if it has its own Stage mounting logic, but based on the current code, updating the BrowserModal condition should be sufficient.

Diagram

sequenceDiagram
    participant User
    participant GUI
    participant Prober as tw-environment-support-prober
    participant BrowserModal
    participant WebGlBrokenModal
    participant StageWrapper
    
    User->>GUI: Load Application
    GUI->>Prober: isBrowserSupported()
    Prober->>Prober: Check isRendererSupported()
    Prober->>Prober: Check isNewFunctionSupported()
    Prober->>Prober: Check findIncompatibleUserscripts()
    
    alt Browser Not Supported
        Prober-->>GUI: false
        GUI->>BrowserModal: Show (WebGL not supported)
        BrowserModal-->>User: Display error message
    else Browser Supported
        Prober-->>GUI: true
        GUI->>Prober: canActuallyUseWebGL()
        Prober->>Prober: Run smoke test (once, cached)
        Prober->>Prober: Create canvas + WebGL context
        Prober->>Prober: Test buffer creation
        Prober->>Prober: Test framebuffer creation
        Prober->>Prober: Test shader compilation
        Prober->>Prober: Test program linking
        
        alt Smoke Test Fails (iOS 18.7.2 22H123)
            Prober-->>GUI: false
            GUI->>WebGlBrokenModal: Show (WebGL broken)
            WebGlBrokenModal->>Prober: detectIOSVersion()
            Prober-->>WebGlBrokenModal: {isIOS: true, version: '18.7.2'}
            WebGlBrokenModal-->>User: Display error + iOS-specific guidance
        else Smoke Test Passes
            Prober-->>GUI: true
            GUI->>StageWrapper: Mount with isRendererSupported=true
            StageWrapper->>StageWrapper: Render Stage component
            StageWrapper-->>User: Show working Stage
        end
    end

Loading

Import In IDE

🤖 Prompt for AI Agents

I have created the following plan after thorough exploration and analysis of the codebase. Follow the below plan verbatim. Trust the files and references. Do not re-verify what's written in the plan. Explore only when absolutely necessary. First implement all the proposed file changes and then I'll review all the changes together at the end.

### Observations

The codebase uses `Renderer.isSupported()` from scratch-render which is optimistic on broken Safari builds. The existing flow shows `BrowserModal` when `isBrowserSupported()` returns false, and the `StageWrapper` conditionally renders the Stage based on `isRendererSupported()`. The modal system uses both Redux-managed modals and directly rendered ReactModal components for blocking errors. The existing `webgl-modal` component is unused in the current flow - instead, `BrowserModal` handles WebGL not supported cases. The new broken WebGL modal should be shown between the browser support check and Stage mounting.

### Approach

The implementation adds a hardened WebGL smoke test that detects broken WebGL implementations (like iOS 18.7.2 build 22H123) and displays a user-friendly modal with actionable guidance. The approach follows the existing modal patterns in the codebase, using ReactModal directly for blocking error modals. The smoke test runs once per session and is cached, checking actual WebGL resource creation beyond the optimistic `Renderer.isSupported()` check. The new modal matches the existing WebGL modal styling and includes iOS-specific guidance when applicable.

### Reasoning

I explored the codebase structure, examined the existing environment support prober, studied the modal system and patterns, analyzed how WebGL detection currently works, reviewed the Stage wrapper mounting logic, and identified where the new smoke test and modal should be integrated into the existing flow.

## Mermaid Diagram

sequenceDiagram
    participant User
    participant GUI
    participant Prober as tw-environment-support-prober
    participant BrowserModal
    participant WebGlBrokenModal
    participant StageWrapper
    
    User->>GUI: Load Application
    GUI->>Prober: isBrowserSupported()
    Prober->>Prober: Check isRendererSupported()
    Prober->>Prober: Check isNewFunctionSupported()
    Prober->>Prober: Check findIncompatibleUserscripts()
    
    alt Browser Not Supported
        Prober-->>GUI: false
        GUI->>BrowserModal: Show (WebGL not supported)
        BrowserModal-->>User: Display error message
    else Browser Supported
        Prober-->>GUI: true
        GUI->>Prober: canActuallyUseWebGL()
        Prober->>Prober: Run smoke test (once, cached)
        Prober->>Prober: Create canvas + WebGL context
        Prober->>Prober: Test buffer creation
        Prober->>Prober: Test framebuffer creation
        Prober->>Prober: Test shader compilation
        Prober->>Prober: Test program linking
        
        alt Smoke Test Fails (iOS 18.7.2 22H123)
            Prober-->>GUI: false
            GUI->>WebGlBrokenModal: Show (WebGL broken)
            WebGlBrokenModal->>Prober: detectIOSVersion()
            Prober-->>WebGlBrokenModal: {isIOS: true, version: '18.7.2'}
            WebGlBrokenModal-->>User: Display error + iOS-specific guidance
        else Smoke Test Passes
            Prober-->>GUI: true
            GUI->>StageWrapper: Mount with isRendererSupported=true
            StageWrapper->>StageWrapper: Render Stage component
            StageWrapper-->>User: Show working Stage
        end
    end

## Proposed File Changes

### src/lib/tw-environment-support-prober.js(MODIFY)

Add a new exported function `canActuallyUseWebGL()` that performs a comprehensive smoke test of WebGL functionality. The function should:

1. Return the cached result if already tested (use a module-level variable `cachedWebGLSmokeTest` initialized to null)
2. First check if `isRendererSupported()` returns false - if so, cache and return false immediately (no point testing if WebGL isn't supported at all)
3. Create a temporary canvas element and get a WebGL context (try 'webgl2' first, then 'webgl', then 'experimental-webgl')
4. If context creation fails, cache false and return
5. Perform the following smoke tests on the context:
   - Create and bind a buffer using `gl.createBuffer()` and `gl.bindBuffer(gl.ARRAY_BUFFER, buffer)`
   - Upload tiny data to the buffer using `gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0, 0]), gl.STATIC_DRAW)`
   - Create a framebuffer using `gl.createFramebuffer()`
   - Compile a minimal vertex shader (e.g., `void main() { gl_Position = vec4(0.0, 0.0, 0.0, 1.0); }`)
   - Compile a minimal fragment shader (e.g., `void main() { gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); }`)
   - Check shader compilation status using `gl.getShaderParameter(shader, gl.COMPILE_STATUS)`
   - Create a program, attach shaders, link it, and verify link status using `gl.getProgramParameter(program, gl.LINK_STATUS)`
   - Verify `gl.getParameter(gl.VERSION)` returns a truthy value
6. If any step fails or throws an exception, cache false and return false
7. If all tests pass, cache true and return true
8. Wrap the entire test in a try-catch block to handle any unexpected errors
9. Add optional telemetry: set `window.__omni = window.__omni || {}; window.__omni.webglProbe = {passed: boolean, failedStep: string}` for debugging

Also add a helper function `detectIOSVersion()` that:
1. Parses `navigator.userAgent` to detect iOS/iPadOS version
2. Returns an object with `{isIOS: boolean, version: string | null}` where version is like '18.7.2'
3. Use regex to match patterns like 'iPhone OS 18_7_2' or 'iPad; CPU OS 18_7_2'
4. Note: Apple build numbers (like 22H123) are not exposed to JavaScript, so don't attempt to detect them

### src/components/webgl-broken-modal(NEW)

Create a new directory to house the WebGL broken modal component files.

### src/components/webgl-broken-modal/webgl-broken-modal.jsx(NEW)

References: 

- src/components/browser-modal/browser-modal.jsx
- src/components/webgl-modal/webgl-modal.jsx
- src/lib/tw-environment-support-prober.js(MODIFY)

Create the WebGL broken modal component following the pattern from `src/components/browser-modal/browser-modal.jsx` and `src/components/webgl-modal/webgl-modal.jsx`.

The component should:
1. Import React, ReactModal, Box, PropTypes, and react-intl utilities
2. Import styles from './webgl-broken-modal.css'
3. Import the iOS detection helper from `src/lib/tw-environment-support-prober.js`
4. Define messages using defineMessages for i18n:
   - label: 'WebGL Appears to be Broken'
   - description: 'Browser reports WebGL support but it's malfunctioning. This is likely a browser bug or graphics driver issue.'
   - iosCallout: 'If you're on iOS/iPadOS 18.7.2, update to build 22H124 or later. Go to Settings → General → Software Update. If you see Beta Updates, turn it off first.'
   - tryAnother: 'Try updating your browser, updating graphics drivers, restarting your device, or using a different browser.'
   - statusLink: 'For more information, see the Status & Issues page.'
5. Use the iOS detection helper to conditionally show iOS-specific guidance
6. Render a ReactModal with:
   - isOpen={true}
   - className and overlayClassName from styles
   - contentLabel from intl.formatMessage
   - onRequestClose={props.onBack}
7. Include an illustration Box (similar to browser-modal) with a colored background
8. Include a body Box with:
   - h2 title with the label message
   - Paragraph explaining the issue
   - Conditional paragraph for iOS 18.7.2 users (if detected)
   - Paragraph with general troubleshooting steps
   - Link to Status & Issues wiki page (use the GitHub wiki URL pattern from the ticket)
   - Back button in a buttonRow Box
9. Support RTL layout via props.isRtl
10. Export with injectIntl HOC

Follow the exact structure and styling patterns from `src/components/browser-modal/browser-modal.jsx`.

### src/components/webgl-broken-modal/webgl-broken-modal.css(NEW)

References: 

- src/components/browser-modal/browser-modal.css
- src/components/webgl-modal/webgl-modal.css

Create the CSS file for the WebGL broken modal, copying the structure from `src/components/browser-modal/browser-modal.css` and `src/components/webgl-modal/webgl-modal.css`.

The CSS should include:
1. Import statements for colors, units, typography, and z-index from '../../css/'
2. .modal-overlay class with fixed positioning, full viewport coverage, z-index from $z-index-modal, and background-color from $ui-modal-overlay
3. .modal-content class with centered positioning (margin: 100px auto), border, border-radius, width: 500px, and other styling matching the browser-modal pattern
4. .illustration class with width: 100%, height: 100px (or 208px to match webgl-modal), background-color from theme variables (e.g., $looks-secondary or $control-primary)
5. RTL support: [dir="rtl"] .illustration with transform: scaleX(-1)
6. .body class with background, padding, text-align: center, and flex layout
7. .button-row class for button container with flex layout and centered alignment
8. Button styling within .button-row
9. .faq-link and .faq-link-text classes for styled links
10. .ios-callout class for highlighting iOS-specific guidance (optional, can use existing paragraph styling)

Match the visual style of existing error modals to maintain consistency.

### src/containers/webgl-broken-modal.jsx(NEW)

References: 

- src/containers/webgl-modal.jsx
- src/components/webgl-broken-modal/webgl-broken-modal.jsx(NEW)

Create the container component for the WebGL broken modal, following the pattern from `src/containers/webgl-modal.jsx`.

The container should:
1. Import React and PropTypes
2. Import the WebGlBrokenModalComponent from '../components/webgl-broken-modal/webgl-broken-modal.jsx'
3. Create a class component WebGlBrokenModal that:
   - Has a handleCancel method that calls window.history.back()
   - Renders WebGlBrokenModalComponent with isRtl prop and onBack={this.handleCancel}
4. Define propTypes for isRtl (bool)
5. Export the component as default

This container handles the modal's close behavior and passes through RTL support.

### src/reducers/modals.js(MODIFY)

Add the new WebGL broken modal to the Redux modals system:

1. Add a new constant: `const MODAL_WEBGL_BROKEN = 'webglBrokenModal';`
2. Add the modal to initialState: `[MODAL_WEBGL_BROKEN]: false`
3. Create action creators:
   - `const openWebGlBrokenModal = function () { return openModal(MODAL_WEBGL_BROKEN); };`
   - `const closeWebGlBrokenModal = function () { return closeModal(MODAL_WEBGL_BROKEN); };`
4. Export the new action creators in the export block at the bottom

Follow the exact pattern used for other modals like MODAL_INVALID_PROJECT or MODAL_UNKNOWN_PLATFORM.

### src/components/gui/gui.jsx(MODIFY)

References: 

- src/containers/webgl-broken-modal.jsx(NEW)
- src/lib/tw-environment-support-prober.js(MODIFY)

Integrate the WebGL broken modal into the main GUI component:

1. Add import for the new modal: `import WebGlBrokenModal from '../../containers/webgl-broken-modal.jsx';`
2. Import the smoke test function: Update the existing import from tw-environment-support-prober to include `canActuallyUseWebGL`
3. Add a new prop `webglBrokenModalVisible` to the component's destructured props (around line 162)
4. Add the prop to propTypes (around line 558): `webglBrokenModalVisible: PropTypes.bool`
5. In the render method, add the WebGlBrokenModal to the alwaysEnabledModals fragment (around line 196):
   ```
   {webglBrokenModalVisible && <WebGlBrokenModal />}
   ```
6. Update the condition for showing BrowserModal (around line 259) to also check the smoke test:
   - Change from: `{isBrowserSupported() ? null : (<BrowserModal isRtl={isRtl} />)}`
   - To: `{(isBrowserSupported() && canActuallyUseWebGL()) ? null : (<BrowserModal isRtl={isRtl} />)}`
   - This ensures BrowserModal shows for both "not supported" and "broken" cases as a fallback
7. Update the StageWrapper isRendererSupported prop (around lines 216 and 454) to use the smoke test:
   - Change from: `isRendererSupported={isRendererSupported()}`
   - To: `isRendererSupported={isRendererSupported() && canActuallyUseWebGL()}`

Note: The modal visibility will be controlled by Redux state, but the actual triggering logic should be in a parent component or initialization code that checks the smoke test and dispatches the openWebGlBrokenModal action if needed.

### src/playground/render-interface.jsx(MODIFY)

References: 

- src/lib/tw-environment-support-prober.js(MODIFY)

Update the playground interface to use the WebGL smoke test:

1. Update the import from tw-environment-support-prober to include `canActuallyUseWebGL`
2. Update the condition for showing BrowserModal (around line 313-315):
   - Change from: `{isBrowserSupported() ? null : (<BrowserModal isRtl={isRtl} />)}`
   - To: `{(isBrowserSupported() && canActuallyUseWebGL()) ? null : (<BrowserModal isRtl={isRtl} />)}`

This ensures the playground also respects the smoke test and shows the error modal when WebGL is broken.

Note: The playground might need additional integration if it has its own Stage mounting logic, but based on the current code, updating the BrowserModal condition should be sufficient.

---

Developer Humor

🔧 WebGL walked into a bar on iOS 18.7.2...\n> The bartender said, \We support you!\n> WebGL tried to order a shader...\n> But the compiler said, \NOPE! 🚫\n> \n> Now we catch that lie,\n> Show a modal, don't just die! 🎭\n> Update to 22H124, and you'll be free! 🎉

---

Execution Information

Branch: main
Commit: 411106b

---

💡 Tips

Supported Commands (Inside Comments)

• Use @traycerai generate to iterate on the previous version of the implementation plan.

Supported Commands (Inside Description)

• Add @traycerai ignore anywhere in the ticket description to prevent this ticket from being processed.
• Add @traycerai branch:<branch-name> anywhere in the ticket description to specify the target branch for the implementation plan.

Community

• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[github-actions]

👋 Hi @coderabbitai[bot]! I've detected potential duplicate issues with lower confidence (analyzed titles only due to context limitations):

• Broken on safari #364: Broken on safari

Please check if any of these existing issues describe the same problem. Since this analysis was based on titles only, please review the full content of these issues to confirm if they're truly duplicates. If so, feel free to add your comments there instead! 🙂

[github-actions]

This issue highlights a problem with WebGL implementation on Safari/WebKit for iOS/iPadOS 18.7.2 (build 22H123), where the browser incorrectly claims WebGL support, causing OmniBlocks to crash when attempting to initialize its Stage. The proposed solution includes a more rigorous WebGL detection mechanism and a user-friendly modal to inform affected users about the issue, offering steps like updating to build 22H124 or trying another browser.

The scope covers creating a smoke test for WebGL functionality, adding a modal for affected users, incorporating iOS-specific guidance based on the user agent, and ensuring this mechanism works seamlessly without altering the renderer's internals or affecting supported configurations. This will give users a clear, actionable message while maintaining stability for unaffected environments. Let us know if further clarification or assistance is needed!

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

Thank you for the duplicate check! Issue #364 and this issue #367 are intentionally related but not duplicates:

• Broken on safari #364 ("Broken on safari") is the bug report documenting the WebGL failure on iOS/iPadOS 18.7.2 build 22H123
• Modal: Detect and message broken WebGL (iOS/iPadOS 18.7.2 build 22H123) #367 (this issue) is the implementation task to build the modal and detection mechanism that addresses the problem reported in Broken on safari #364

This issue explicitly references #364 as its backlink and implements the solution for that reported bug. They're meant to work together as problem → solution.

No action needed - this is working as intended! 🐰

---

🧠 Learnings used

Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-05T01:34:24.309Z
Learning: CodeRabbit experienced a spam bug on PR #309 in OmniBlocks/scratch-gui where it posted 11 duplicate "no user input to reply to" messages. The spam was triggered by bot comments from github-actions and wellcode-ai. The comments were successfully minimized using GitHub GraphQL API mutations with the OFF_TOPIC classifier.

---

Learnt from: github-actions[bot]
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-05T02:01:48.684Z
Learning: OmniBlocks/scratch-gui CI preference: In the "Mega PR Test & Analysis" sticky comment, only @-mention the requester if the actor is a human user; do not @-mention bots to avoid triggering bot back-and-forth and comment spam.

---

Learnt from: github-actions[bot]
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-05T02:01:48.684Z
Learning: OmniBlocks/scratch-gui preference: In the Mega PR Test & Analysis workflow’s sticky comment, only @-mention the requester when the actor is a human (GitHub user type "User"); do not @-mention bots to avoid triggering bot loops and PR spam.

---

Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-05T01:49:19.796Z
Learning: OmniBlocks/scratch-gui process preference: In the Mega PR Test & Analysis workflow, only mention the requester if the actor is a human; skip mentions for bot actors to avoid notification loops and bot auto-replies.

---

Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-10-08T20:04:51.287Z
Learning: Do not mention or ping the github-actions bot in the OmniBlocks/scratch-gui repository as it lacks context and generates unhelpful automated responses.

---

Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-05T01:48:23.435Z
Learning: OmniBlocks/scratch-gui preference: In the Mega PR Test & Analysis workflow’s sticky comment, only mention the requester when the requester is a human user; for bots/apps, render the name without an @ to avoid bot-to-bot pings.

---

Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-05T01:48:23.435Z
Learning: OmniBlocks/scratch-gui: For CI comment hygiene, prefer not mentioning bot/app requesters in the Mega PR Test & Analysis sticky comment; only mention humans. Track such behavior changes via a GitHub issue assigned to supervoidcoder with backlinks to the initiating PR and comment.

---

Learnt from: supervoidcoder
Repo: OmniBlocks/scratch-gui PR: 0
File: :0-0
Timestamp: 2025-11-15T22:03:54.957Z
Learning: OmniBlocks/scratch-gui: iOS/iPadOS 18.7.2 build 22H123 has a WebKit bug where Renderer.isSupported() returns true but WebGL resource creation (gl.createBuffer(), shader compilation) fails, causing OmniBlocks to crash. Need hardened WebGL smoke test that actually creates GL resources to detect broken WebGL implementations. Build 22H124 fixes it.

[supervoidcoder]

@coderabbitai wait coderabbit look at the issue number... 67... six seven.... SIX SEVEN :O 🤯 🤪 🤯 🤪 🤯 🤪 🤯 🤪 🤯 🤪 🤯 🤪 🤯 🤪

[supervoidcoder]

@coderabbitai wait coderabbit look at the issue number... 67... six seven.... SIX SEVEN :O 🤯 🤪 🤯 🤪 🤯 🤪 🤯 🤪 🤯 🤪 🤯 🤪 🤯 🤪

ha... nobody gets it 😞

[supervoidcoder]

@coderabbitai wait coderabbit look at the issue number... 67... six seven.... SIX SEVEN :O 🤯 🤪 🤯 🤪 🤯 🤪 🤯 🤪 🤯 🤪 🤯 🤪 🤯 🤪

ha... nobody gets it 😞

Ha....