← Back to the site changelog
Site Changelog
Original commit record
Merge pull request #158 from fix/ios-inapp-header-ratio-20260831
Fix transient iPhone header layout
- SHA
d2edd8ed365b3aec47243796d55a679cd7086145
- Commit date
- Author
- nnneeeooo-nnneeeooo
- Committer
- web-flow
Changed files (2)
-
static/site.css
modified · +10 / −3
-
tests/test_mobile_layout.py
modified · +4 / −0
Full diff
@@ -64,10 +64,13 @@ a.ticker-item:hover .ticker-time { color: var(--color-accent); }\n .brand-link {\n display: inline-flex; align-items: center; color: inherit;\n text-decoration: none; flex: 0 0 320px; min-width: 250px;\n+ /* iOS in-app browsers briefly use the object's 220px HTML height while\n+ its external SVG is loading. Pin the frame ratio before that happens. */\n+ aspect-ratio: 50 / 11; overflow: hidden;\n }\n .brand-logo {\n- display: block; width: 100%; height: auto; max-width: 320px;\n- background: transparent;\n+ display: block; width: 100%; height: 100%; max-width: 320px;\n+ object-fit: contain; background: transparent;\n }\n .footer-logo {\n display: block; width: min(100%, 300px); height: auto;\n@@ -160,8 +163,12 @@ a.ticker-item:hover .ticker-time { color: var(--color-accent); }\n padding: 7px 16px; display: flex; align-items: center; flex-shrink: 0;\n background: var(--color-accent); color: var(--color-bg); font-size: 12px;\n font-weight: 800; letter-spacing: .14em; text-transform: uppercase;\n+ position: relative; z-index: 1;\n+}\n+.ticker-window {\n+ min-width: 0; overflow: hidden; flex: 1; display: flex; align-items: center;\n+ position: relative; contain: paint;\n }\n-.ticker-window { min-width: 0; overflow: hidden; flex: 1; display: flex; align-items: center; }\n \n .nav-link {\n cursor: pointer; font-size: 14px; font-weight: 600; padding: 8px 14px;\n@@ -86,6 +86,10 @@ def main() -> None:\n assert "@media (max-width: 900px)" in css\n assert "@media (max-width: 720px)" in css\n assert ".page { width: 100%; overflow-x: clip; }" in css\n+ assert "aspect-ratio: 50 / 11; overflow: hidden;" in css\n+ assert "width: 100%; height: 100%; max-width: 320px" in css\n+ assert "object-fit: contain; background: transparent;" in css\n+ assert "position: relative; contain: paint;" in css\n assert "grid-template-columns: repeat(3, minmax(0, 1fr))" in css\n assert ".js .site-nav.is-open { display: grid; }" in css\n assert "grid-template-columns: repeat(2, minmax(0, 1fr))" in css
