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

apps/www/content/docs/components/safari.mdx

@@ -2,7 +2,7 @@
 title: Safari
 date: 2024-09-01
 description: A safari browser mockup to showcase your website.
-author: dillionverma
+author: dillionverma, Yeom-JinHo
 published: true
 ---
 
@@ -66,15 +66,18 @@ import { Safari } from "@/components/magicui/safari";
 
 ## Props
 
-| Prop       | Type         | Default     | Description                                                 |
-| ---------- | ------------ | ----------- | ----------------------------------------------------------- |
-| `url`      | `string`     | `-`         | The URL to display in the Safari address bar                |
-| `imageSrc` | `string`     | `-`         | The source URL of the image to display in the Safari window |
-| `videoSrc` | `string`     | `-`         | The source URL of the video to display in the Safari window |
-| `width`    | `number`     | `1203`      | The width of the Safari window                              |
-| `height`   | `number`     | `753`       | The height of the Safari window                             |
-| `mode`     | `SafariMode` | `"default"` | The display mode of the Safari window.                      |
-
-type `SafariMode` = `"default" | "simple"`.
-
-The `Safari` component also accepts all properties of the `SVGElement` type.
+| Prop        | Type                  | Default     | Description                                                 |
+| ----------- | --------------------- | ----------- | ----------------------------------------------------------- |
+| `url`       | `string`              | `-`         | The URL to display in the Safari address bar                |
+| `imageSrc`  | `string`              | `-`         | The source URL of the image to display in the Safari window |
+| `videoSrc`  | `string`              | `-`         | The source URL of the video to display in the Safari window |
+| `mode`      | `SafariMode`          | `"default"` | The display mode of the Safari window.                      |
+| `className` | `string`              | `-`         | Additional classes applied to the wrapper `<div>`           |
+| `style`     | `React.CSSProperties` | `-`         | Inline styles applied to the wrapper `<div>`                |
+
+## Notes
+
+- Sizing: width and height props have been removed. The size is controlled by the wrapper `<div>`. The component enforces the aspect ratio 1203/753.
+- Masking: The screen area is only masked when media (src or videoSrc) is provided. Without media, only the frame is rendered.
+- HTML Attributes: The Iphone15Pro component accepts all standard HTMLDivElement props.
+- iOS Compatibility: Video is rendered as a DOM overlay instead of foreignObject to avoid Safari/iOS masking issues.

apps/www/public/r/safari-demo-2.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/example/safari-demo-2.tsx",
-      "content": "import { Safari } from \"@/registry/magicui/safari\";\n\nexport default function SafariDemo() {\n  return (\n    <div className=\"relative\">\n      <Safari\n        url=\"magicui.design\"\n        className=\"size-full\"\n        imageSrc=\"https://via.placeholder.com/1200x750\"\n      />\n    </div>\n  );\n}\n",
+      "content": "import { Safari } from \"@/registry/magicui/safari\";\n\nexport default function SafariDemo() {\n  return (\n    <div className=\"w-[1203px]\">\n      <Safari\n        url=\"magicui.design\"\n        imageSrc=\"https://via.placeholder.com/1200x750\"\n      />\n    </div>\n  );\n}\n",
       "type": "registry:example"
     }
   ]

apps/www/public/r/safari-demo-3.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/example/safari-demo-3.tsx",
-      "content": "import { Safari } from \"@/registry/magicui/safari\";\n\nexport default function SafariDemo() {\n  return (\n    <div className=\"relative\">\n      <Safari\n        url=\"magicui.design\"\n        className=\"size-full\"\n        videoSrc=\"https://videos.pexels.com/video-files/27180348/12091515_2560_1440_50fps.mp4\"\n      />\n    </div>\n  );\n}\n",
+      "content": "import { Safari } from \"@/registry/magicui/safari\";\n\nexport default function SafariDemo() {\n  return (\n    <div className=\"w-[1203px]\">\n      <Safari\n        url=\"magicui.design\"\n        videoSrc=\"https://videos.pexels.com/video-files/27180348/12091515_2560_1440_50fps.mp4\"\n      />\n    </div>\n  );\n}\n",
       "type": "registry:example"
     }
   ]

apps/www/public/r/safari-demo-4.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/example/safari-demo-4.tsx",
-      "content": "import { Safari } from \"@/registry/magicui/safari\";\n\nexport default function SafariDemo() {\n  return (\n    <div className=\"relative\">\n      <Safari url=\"magicui.design\" mode=\"simple\" className=\"size-full\" />\n    </div>\n  );\n}\n",
+      "content": "import { Safari } from \"@/registry/magicui/safari\";\n\nexport default function SafariDemo() {\n  return (\n    <div className=\"w-[1203px]\">\n      <Safari url=\"magicui.design\" mode=\"simple\" />\n    </div>\n  );\n}\n",
       "type": "registry:example"
     }
   ]

apps/www/public/r/safari-demo.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/example/safari-demo.tsx",
-      "content": "import { Safari } from \"@/registry/magicui/safari\";\n\nexport default function SafariDemo() {\n  return (\n    <div className=\"relative\">\n      <Safari url=\"magicui.design\" className=\"size-full\" />\n    </div>\n  );\n}\n",
+      "content": "import { Safari } from \"@/registry/magicui/safari\";\n\nexport default function SafariDemo() {\n  return (\n    <div className=\"w-[1203px]\">\n      <Safari url=\"magicui.design\" />\n    </div>\n  );\n}\n",
       "type": "registry:example"
     }
   ]

apps/www/registry/example/safari-demo-2.tsx

@@ -2,10 +2,9 @@ import { Safari } from "@/registry/magicui/safari";
 
 export default function SafariDemo() {
   return (
-    <div className="relative">
+    <div className="w-[1203px]">
       <Safari
         url="magicui.design"
-        className="size-full"
         imageSrc="https://via.placeholder.com/1200x750"
       />
     </div>

apps/www/registry/example/safari-demo-3.tsx

@@ -2,10 +2,9 @@ import { Safari } from "@/registry/magicui/safari";
 
 export default function SafariDemo() {
   return (
-    <div className="relative">
+    <div className="w-[1203px]">
       <Safari
         url="magicui.design"
-        className="size-full"
         videoSrc="https://videos.pexels.com/video-files/27180348/12091515_2560_1440_50fps.mp4"
       />
     </div>

apps/www/registry/example/safari-demo-4.tsx

@@ -2,8 +2,8 @@ import { Safari } from "@/registry/magicui/safari";
 
 export default function SafariDemo() {
   return (
-    <div className="relative">
-      <Safari url="magicui.design" mode="simple" className="size-full" />
+    <div className="w-[1203px]">
+      <Safari url="magicui.design" mode="simple" />
     </div>
   );
 }

apps/www/registry/example/safari-demo.tsx

@@ -2,8 +2,8 @@ import { Safari } from "@/registry/magicui/safari";
 
 export default function SafariDemo() {
   return (
-    <div className="relative">
-      <Safari url="magicui.design" className="size-full" />
+    <div className="w-[1203px]">
+      <Safari url="magicui.design" />
     </div>
   );
 }