platform-admin/alva
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Telefonen fastnade i inzoomat läge efter inloggning

Browse Source 
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 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012EQg3rJsrQ1ZNTvkzmQAtt
This commit is contained in:
Claude
2026-08-06 21:56:09 +00:00
parent 6665004ec7
commit 83944f4962
2 changed files with 30 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
felsokning/app/src/felsokning/__tests__/alva-yta.test.ts
+13
View File
@@ -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 ----------------------------------
felsokning/app/src/index.css
+17
View File
@@ -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,