fix(safari): resolve iOS device video masking issue with DOM overlay (breaking change)

[Yeom-JinHo]

Same issue #780

Description

This PR focuses on fixing iOS compatibility issues in the Safari component.
Because mobile-first is the priority, this fix introduces a breaking change to ensure stable rendering across devices.

Changes

• iOS Compatibility (major fix): Replaced <foreignObject> video rendering with a DOM overlay to solve Safari/iOS masking issues.
• Sizing (breaking change): Removed width and height props. The component size is now controlled by the wrapper <div>, enforcing the aspect ratio 753/1203.
• Masking: The screen area is masked only when media (src or videoSrc) is provided. Without media, only the frame is rendered.
• HTML Attributes: The component now accepts all standard HTMLDivElement props.
• Autoplay: Video uses muted and playsInline to allow autoplay on mobile. A poster can be added for better initial paint.
• Accessibility: If decorative, add aria-hidden="true" to the wrapper <div> for compliance.

Motivation

• Mobile-first: Fix critical Safari/iOS rendering issues with video masking.
• Breaking Change: The sizing API has been simplified to align with common UI library patterns, where size is handled by the wrapper.
• This ensures consistent cross-platform behavior and a more future-proof API.

Breaking Changes

• Removed width and height props from Safari.
  → Consumers must now control size via wrapper CSS (e.g., w-[1203px], w-full, etc.).
• Any project relying on explicit width/height props will need to migrate.

Screenshots

iphone13 mini

[vercel]

@Yeom-JinHo is attempting to deploy a commit to the product-studio Team on Vercel.

A member of the Team first needs to authorize it.

[Yeom-JinHo]

I’ve deployed the updated version to my live site, where you can check it:

https://v-f-labs-website-web.vercel.app/vague-frequency-labs/safari-demo?utm_source=magic-ui-github&utm_content=safari

[Yeom-JinHo]

@AdrienADV
Hello,

I’ve also found the same issue in the Safari Component and have applied a fix.
Could you kindly check it again as you did before? Since you reported the issue, I would like to ask for your confirmation.

Thank you once again!

[AdrienADV]

Perfect !