How to fix stuck rendering, overlapping previews, WebGL settings, and error codes
Designing products in Fourthwall should be a smooth process. However, rendering or preview issues can sometimes occur. These problems may show as stuck rendering (staying at 0%), overlapping designs, missing previews, or error pages after finalization.
Most of these issues can be resolved with a few quick checks. This article provides guidance on how to address these issues.
Step 1: Check your artwork file
Large or unsupported files can cause rendering to get stuck or fail. Make sure your uploaded artwork meets the following requirements:
- Format: PNG or JPEG
- Resolution: At least 1500 × 1500 pixels (minimum 300 DPI for print quality)
- Design elements: Avoid transparency, glow/fade effects, or anything outside the print-safe area
Step 2: Confirm browser and WebGL settings
Fourthwall’s designer uses web-based rendering (WebGL). If your browser doesn’t support it, rendering may freeze or crash.
Note: WebGL relies on your GPU for rendering. If it’s blocked, product previews won’t generate properly.
Chrome:
- Go to chrome://settings
- Under "System," turn on Use hardware acceleration when available
- Restart Chrome
- Type chrome://gpu in the address bar to confirm WebGL is enabled
Firefox:
- Visit about:config
- Search and set "webgl.force-enabled" to true using the toggle switch
- Restart for the changes to take effect
Edge:
- Click the menu icon > Settings > System and performance
- Click Graphics acceleration
- Enable the Use graphics acceleration when available setting if not already enabled
- Restart your browser
Safari:
macOS natively supports WebGL on Safari, but it may need to be enabled manually in older versions. To do that:
- Go to Preferences > Advanced
- Check Show Develop menu in the menu bar
- In the Develop menu, select Enable WebGL
Step 3: Try a different browser or clear the cache
If rendering still won’t progress, cached data or browser quirks (especially in Edge or Safari) may be preventing previews from displaying correctly.
- Clear your browser cache and cookies
- Test in a different browser (Chrome and Firefox are recommended) or incognito mode (this removes browser extensions, as that may be the source of the issue)
- Update your browser to the latest version
Step 4: Save progress to avoid lost work
To prevent potential rendering errors due to long edits, it's best to protect your designs from crashes or errors (e.g., "Aw, Snap!" error in Chrome) by proactively saving progress.
- Use Save as hidden (found in the product editor sidebar) to save drafts without publishing
- Continue editing later from All Products > Hidden
Step 5: Check for specific product or error code issues
- If rendering is stuck at 0%, even with valid artwork, try another product type (rarely, a single product style can cause issues).
- If you encounter an Internal Server Error, please report which page triggers it and include your browser and OS details.
- If designs overlap or duplicate in previews, refresh or re-create the product (because these are usually one-off bugs).
When to reach out to support
If you’ve tried all the above and still see:
- Rendering stuck beyond 0%
- Previews not displaying across multiple products
- Error pages after finalizing
Please share with Support:
- Your operating system (Windows/macOS)
- Browser and version
- Your site URL or the URL of the product designer when you ran into the issue (this helps even more so)
- GPU/graphics card model (helps with WebGL-related bugs)
- Screenshots or a screen recording of the issue
This helps our team investigate quickly.
Rendering Issues FAQ
Why is my rendering stuck at 0%?
This usually happens when the file is too large, has unsupported elements, or your connection drops. Try reducing file size, reducing layers, or re-uploading.
Why do I see overlapping designs in the preview?
Overlapping typically occurs when multiple layers aren’t aligned correctly. Before exporting, double-check your source file for duplicate or misaligned layers.
Why does my render look blurry or pixelated?
Low-resolution source files or scaling beyond the original size can cause blurry outputs. Always upload high-resolution files and maintain correct aspect ratios.
Why is rendering taking so long?
Heavy designs with many effects (e.g., gradients, transparencies) require more processing time. Consider flattening layers, optimizing/simplifying design effects, or splitting large files.
Why is my render different on desktop vs. mobile?
Rendering engines display differently across devices. Preview on both desktop and mobile to catch inconsistencies and adjust file settings accordingly.