From 83944f4962e1ce8f36517b07f01e655acac0b801 Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 6 Aug 2026 21:56:09 +0000 Subject: [PATCH] =?UTF-8?q?Telefonen=20fastnade=20i=20inzoomat=20l=C3=A4ge?= =?UTF-8?q?=20efter=20inloggning?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Rapporterat med skärmdump: portalens första sida möttes kraftigt inzoomad efter inloggning på iPhone. Orsaken är iOS Safaris beteende, inte vår layout: ett formulärfält vars text är mindre än 16 px får webbläsaren att zooma in vid fokus — och den zoomar aldrig ut igen efter navigeringen. Inloggningens fält är 14 px och arbetsvyns 13 px, båda under tröskeln. Botemedlet är fältets textstorlek, inte viewport-metataggen. `maximum-scale=1` hade också stoppat inzoomningen men samtidigt tagit ifrån användaren nypzoomen, och ett tillgänglighetsverktyg offras inte för att slippa en CSS-rad. Regeln ligger i kaskaden på .alva-yta och gäller bara pekskärmar (hover: none, pointer: coarse) — på skrivbordet finns ingen autozoom och 13 px är designens täthet. Verifierat mot den bakade artefakten med pekskärmsemulering: inloggningen och arbetsvyns namnfält mäter 16 px på telefon, 14 respektive 13 px på skrivbord. Regeln låst i designtestet, som redan läser index.css. 769 tester, typkontroll, lint och artefaktmätning gröna. Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_012EQg3rJsrQ1ZNTvkzmQAtt --- .../src/felsokning/__tests__/alva-yta.test.ts | 13 +++++++++++++ felsokning/app/src/index.css | 17 +++++++++++++++++ 2 files changed, 30 insertions(+) diff --git a/felsokning/app/src/felsokning/__tests__/alva-yta.test.ts b/felsokning/app/src/felsokning/__tests__/alva-yta.test.ts index 6918ade..8347da8 100644 --- a/felsokning/app/src/felsokning/__tests__/alva-yta.test.ts +++ b/felsokning/app/src/felsokning/__tests__/alva-yta.test.ts @@ -232,6 +232,19 @@ describe("ALVA-ytan bär sin egen typografi", () => { it("siffror sätts med fast bredd så beteckningar går att jämföra", () => { expect(css).toContain("tabular-nums"); }); + + it("formulärfält är minst 16 px på pekskärm — annars autozoomar iOS och fastnar", () => { + // Buggen som rapporterades från en telefon: inloggningens fält är + // 14 px, iOS zoomar in vid fokus och zoomar aldrig ut, och portalens + // första sida möts i inzoomat läge. Botemedlet är textstorleken, + // inte maximum-scale — nypzoomen är ett tillgänglighetsverktyg och + // får inte offras. + const regel = css.match(/@media \(hover: none\) and \(pointer: coarse\)[\s\S]*?\n\}/)?.[0] ?? ""; + expect(regel).toContain(".alva-yta input"); + expect(regel).toContain(".alva-yta textarea"); + expect(regel).toContain(".alva-yta select"); + expect(regel).toContain("font-size: 16px"); + }); }); // ---- Snittet måste följa med i bygget ---------------------------------- diff --git a/felsokning/app/src/index.css b/felsokning/app/src/index.css index ecc1a03..79c75ca 100644 --- a/felsokning/app/src/index.css +++ b/felsokning/app/src/index.css @@ -199,6 +199,23 @@ font-variant-numeric: tabular-nums; } +/* iOS Safari zoomar in på ett formulärfält vars text är mindre än 16 px + — och zoomar inte ut igen efter navigeringen. Den som loggade in på en + telefon fastnade därför i inzoomat läge på portalens första sida. + + Botemedlet är fältets textstorlek, inte viewport-metataggen: + `maximum-scale=1` hade också stoppat inzoomningen men samtidigt tagit + ifrån användaren nypzoomen, och ett tillgänglighetsverktyg ska inte + offras för att slippa en CSS-rad. Regeln gäller bara pekskärmar — + på skrivbordet finns ingen autozoom och 13 px är rätt täthet. */ +@media (hover: none) and (pointer: coarse) { + .alva-yta input:not([type="checkbox"]):not([type="radio"]), + .alva-yta select, + .alva-yta textarea { + font-size: 16px; + } +} + .alva-yta .font-mono { font-family: ui-monospace,