Why do webkit browsers shrink some floating elements on mobiles?

Question

I'm trying to create a simlpe responsive layout (JSFiddle) for a web app and struggle with the rendering on mobile webkit browsers.
They shrink some of the floating elements in a (to me) unpredictable way.

Layouts work well with desktop browsers and Firefox and Opera on Android but not with Chrome on Android and seemingly Safari on iOS (tested with Kitkat smartphone and simulated in Chrome for Android and Apple devices):
Simulated Nexus 4 Rendering
(Text in blue and orange areas should be as big as in the white area)

It seems it doesn't matter which exact CSS attributes I use; I tried CSS tables, boxes, floats, flex-boxes and lastly -webkit-boxes - all with the same result: Too small headers and footers

This is part of a project on Google Script, so unfortunately I am not in control of the viewport meta-tag, but a quick try with a local file and a <meta name="viewport" content="width=device-width, initial-scale=1"> tag didn't solve the issue either.

Has anyone experienced this before and has an idea how to fix it?

Thanks!

Answer 1

It seems this answer by moeffju is relevant to your problem:

Add max-height: 999999px; to the element you want to prevent font boosting on, or its parent.

https://stackoverflow.com/a/12965146/5297207

Using the Chrome emulator and adding this property to the P elements in the white area made the text adhere to the CSS font-size. (It makes the white text small like the blue and orange, not them big. The original sizing is small).

See the comments of the original answer I linked to for an explanation of why this works, and also some warnings about problems that might occur from using this fix. I've used it successfully on a couple of sites but didn't do very thourough testing on Safari.