Created
June 17, 2026 13:27
-
-
Save Sharktheone/0df80957b4784347d3086c1927fd0e3b to your computer and use it in GitHub Desktop.
Webkit SVG mm bug
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>WebKit SVG fit-content repro (minimal)</title> | |
| <style> | |
| header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| font-family: sans-serif; | |
| } | |
| /* height constrained, width is fit-content */ | |
| .logo { height: 36px; width: fit-content; } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <!-- Generic SVG. The only thing that matters is the intrinsic | |
| size declared in millimetres. With width:fit-content, WebKit | |
| uses that huge intrinsic width instead of scaling to the | |
| 36px height, so the nav below is pushed off-screen. --> | |
| <svg class="logo" width="1000mm" height="200mm" viewBox="0 0 1000 200" | |
| xmlns="http://www.w3.org/2000/svg"> | |
| <rect width="1000" height="200" fill="#888" /> | |
| </svg> | |
| <nav>menu</nav> | |
| </header> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>WebKit SVG fit-content header repro</title> | |
| <style> | |
| * { box-sizing: border-box; margin: 0; padding: 0; } | |
| body { font-family: sans-serif; } | |
| /* The header: logo on the left, nav on the right. */ | |
| header { | |
| display: flex; | |
| flex-direction: row; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 1rem; | |
| background: #f3ecd2; | |
| } | |
| /* This mirrors the real site: the logo height is constrained, | |
| and its width is "fit-content" (Tailwind `w-fit`). | |
| BUG (WebKit/Safari): the inline SVG declares its intrinsic | |
| size in millimetres (width="1375.328mm"). When the width is | |
| `fit-content`, WebKit uses that huge intrinsic width (~5200px) | |
| instead of deriving it from the constrained height. The logo | |
| then takes the full row width and pushes the nav off-screen, | |
| making the rest of the header invisible. | |
| Chrome/Firefox scale the width down to match the height, so | |
| the header looks fine there. */ | |
| .logo { | |
| height: 36px; /* h-9 */ | |
| width: fit-content; | |
| } | |
| nav { | |
| display: flex; | |
| gap: 1.5rem; | |
| flex-shrink: 0; | |
| } | |
| nav a { font-size: 1.25rem; color: #222; text-decoration: none; } | |
| .note { | |
| padding: 1rem; | |
| max-width: 60ch; | |
| line-height: 1.5; | |
| } | |
| /* Quick fix for comparison: forcing the width to auto (or giving | |
| the SVG height:100%;width:auto with the height on a wrapper) | |
| makes WebKit scale proportionally. Uncomment to verify. | |
| .logo { width: auto; } | |
| */ | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <a href="#"> | |
| <!-- Full logo SVG, intrinsic size declared in mm --> | |
| <svg | |
| class="logo" | |
| width="1375.328mm" | |
| height="523.05902mm" | |
| viewBox="0 0 5201.1103 1978.0645" | |
| version="1.1" | |
| xmlns="http://www.w3.org/2000/svg"><g | |
| transform="translate(-498.93555,-418.2802)"></g><g | |
| id="layer5"></g><g | |
| transform="translate(-498.93555,-418.2802)"><path | |
| style="fill:#d3c496;fill-opacity:1" | |
| d="m 3228.5416,2288.0948 c -45.3304,-6.4256 -163.081,-31.8606 -161.2291,-36.6865 18.401,-2.6993 24.0358,6.4039 120.2291,15.8007 505.5317,37.3065 801.4917,15.9454 1068,-33.0987 228.4309,-42.2563 745.3306,-164.0776 1026.0548,-437.9875 57.8553,-57.1457 87.3098,-97.4872 114.6837,-141.274 6.1897,-10.9163 9.4237,-7.0284 4.7406,5.5295 -1.4059,3.7699 -3.1242,9.5622 -4.4281,12.7299 -94.0484,228.4936 -551.8535,548.3638 -1152.4644,632.0659 -335.2384,50.4939 -681.661,46.7424 -1015.5866,-17.0793 z" /></g><g | |
| transform="translate(-498.93555,-418.2802)"><path | |
| style="fill:#000000" | |
| d="m 4187.9339,2366.4174 c 0,-1.5764 30.5207,-5.813 33,-6.1566 286.56,-38.8402 1076.7205,-186.678 1299.4846,-654.4528 41.1544,-85.3143 48.5692,-168.7341 43.0017,-263 -26.1873,-509.7095 -973.8326,-532.3299 -1193.9859,-530.6921 -50.6,0.5092 -92.345,0.6183 -92.7667,0.2423 -0.4216,-0.376 11.9534,-1.6949 27.5,-2.9309 15.5467,-1.236 40.4167,-3.3433 55.2667,-4.6829 1012.3714,-91.3316 1254.6292,319.2187 1309.1795,470.9961 21.068,58.6182 24.953,218.5067 -48.1914,345.0673 -333.2255,576.5752 -1394.8305,643.1147 -1395.6127,643.077 -1.0399,-0.05 -36.8754,3.9118 -36.8754,2.5324 z" /></g><g | |
| transform="translate(-498.93555,-418.2802)"></g></svg> | |
| </a> | |
| <nav> | |
| <a href="#">A</a> | |
| <a href="#">B</a> | |
| <a href="#">C</a> | |
| <a href="#">D</a> | |
| <a href="#">E</a> | |
| </nav> | |
| </header> | |
| <p class="note"> | |
| In WebKit/Safari the nav links above are pushed off the right edge of | |
| the viewport and become invisible, because the <code>fit-content</code> | |
| logo takes its width from the SVG's intrinsic <code>mm</code> size | |
| (~5200px) instead of scaling to its 36px height. Chrome and Firefox | |
| render it correctly. | |
| </p> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment