Android browser width stretched to iframe content width, despite overflow:hidden

Question

I'm trying to mimick desktop-style iframes in Android (Dolphin browser) with some succes. The trick used is to put an <iframe> with position:relative; inside a <div> with fixed dimensions and overflow:hidden;, then using jQuery Mobile (or rather just the vmouse events) to handle mouse events for scrolling.

All this works fine except for one thing; Even though the <iframe> is clipped, it's content stretches the browser to match size. This is mostly noticable in height.

Here's simplified example code in JSFiddle: http://jsfiddle.net/euKhG/

And here's the result to watch within the Android browser: http://jsfiddle.net/euKhG/embedded/result/ (only works in Android browser!).

Does anybody know how to fix this issue? I've seen iScroll and similar suggested elsewhere, but they seem to touch frames with a remote src like this.

Answer 1

try setting target-densitydpi in meta tag

    <meta id="viewport" name="viewport" content="initial-scale=1, user-scalable=no, width=device-width, target-densitydpi=160dpi"/>

but you'll have to change all other css with respect to this as well