GWT's Layout-Centimeter ruler DIV causing layout issues on IOS 6

Question

I'm using GWT 2.5 and MGWT 1.12. and this happens only on IOS 6 as far as I've tested. This is my issue: I'm using a LayoutPanel in one of the components I wrote to display an animation. When ever that component is created GWT is adding this DIV into the DOM:

This div, which is not part of my code but something LayoutPanels use for size calculations in cm) is causing horrible layout issues on iOS 6. the issue happens when I go from portrait to landscape orientation and back to portrait, this huge DIV is causing the width to miss-calculate and the result of that is that I end up with all the body pushed to the left by what appears to be a blank column.

I already debugged it using WEINRE and if I change the width to 0 the problem disappears, which implies that the div is not really hidden as its supposed to be.

So my question is this. is there a way to disable such support, get rid of that div, or actually make it hidden by pure GWT means?

I know I can get rid of the DIV with JNI code but that's not the fix I'm looking for. Also I'm aware of this related question, but I dont think I'm asking the same: GWT div aria-hidden not hiding in IE

As always, thanks for your time...

Answer 1

A little late yes, but I ran into this issue recently on android browser and chrome for android, seeing the same div element being the root cause. In my case the div was injected because I have the mobile views and full GWT views in the same project.

The full views targeting regular desktop browsers got initialized too and thus injected the troublesome div element into the root document.

The solution for me was to simply separate all mobile and full views into separate packages and scoping those view packages out from each other in their respective mobile and full gwt.xml files.

I don't think one can get around this issue if the standard LayoutPanel is used in a MGWT project.