Cross-Browser Rendering Inconsistency in GameShield CAPTCHA Component

[ComputelessComputer]

Description

The GameShield CAPTCHA web component renders inconsistently across different browser engines. The component is cut off or improperly sized in some browsers while displaying correctly in others.

Affected Browsers

• Correctly rendering browsers: Edge, SigmaOS, Zen Browser, Opera, Firefox
• Browsers showing cut-off content: Chrome, Safari, Brave, Arc

Technical Details

The issue appears to be related to how different browser engines handle:

1. Shadow DOM encapsulation and style inheritance
2. CSS aspect-ratio property implementation
3. Sizing calculations for custom elements

Steps to Reproduce

1. Load the GameShield CAPTCHA component in a responsive container
2. Set the size property to "100%"
3. Observe the rendering across different browsers

Current Workaround

We've implemented a solution that:

• Enforces size constraints directly in the web component
• Uses absolute positioning for the game container
• Adds vendor-specific prefixes and hardware acceleration
• Normalizes size values to respect max dimensions (500px)

Additional Information

The issue highlights the challenges of creating consistent web components across browser engines, particularly when dealing with aspect ratio constraints and responsive sizing.

Screenshots