Opened 7 years ago

Closed 7 years ago

Last modified 7 years ago

#15525 closed defect (fixed)

dojox.geo.openlayers: map not visible if DOCTYPE is specified in the HTML

Reported by: Adrian Vasiliu Owned by: Patrick Ruzand
Priority: undecided Milestone: 1.8
Component: Dojox Version: 1.7.2
Keywords: Cc:
Blocked By: Blocking:

Description

Strangely, all tests in dojox/geo/openlayers/tests have no DOCTYPE specified for their HTML, and after adding <!DOCTYPE HTML> (HTML5) in all tests the map is not visible. (Same result for the HTML4 doctype.) This holds for both dojo-trunk / Dojo 1.8 (as of 18 June 2012) and for the Dojo 1.7 branch.

Reproduced in various desktop and mobile browsers: Chrome 19, Firefox 12, iPhone iOS 5.01, HTC Desire Android 2.2.

This issue hurts in demos/mobileOpenLayers. Here, the rendering of the Back button of the Heading is broken. This is due to the missing DOCTYPE in the demo's HTML, and adding <!DOCTYPE HTML> fixes this dojox.mobile styling problem. But doing so the map is not visible anymore!

How to reproduce for the side-effect in mobileOpenLayers:

  1. Launch demos/mobileOpenLayers/demo.html
  2. Click/touch any item (town) in the list.

=> In the heading on top of the map, the "Back" button is badly styled (see attached mobileOpenLayersBackButton.png). No error in the console.

  1. Add <!DOCTYPE HTML> at the beginning of mobileOpenLayers/demo.html and run again.

=> The Back button is now correctly styled, but the map is not visible anymore (depending on the device, it might show-up for a fraction of second, them disappears).

This side-effect in mobileOpenLayers has also been reproduced in various desktop and mobile browsers: Chrome 19, Firefox 12, iPhone iOS 5.01, HTC Desire Android 2.2.

Attachments (1)

mobileOpenLayersBackButton.png (2.5 KB) - added by Adrian Vasiliu 7 years ago.
Screenshot of the broken styling of the Back button, due to the absence of HTML DOCTYPE.

Download all attachments as: .zip

Change History (13)

Changed 7 years ago by Adrian Vasiliu

Screenshot of the broken styling of the Back button, due to the absence of HTML DOCTYPE.

comment:1 Changed 7 years ago by Adrian Vasiliu

Notes about debugging results in mobileOpenLayers:

1/ The HTML tree with and without the HTML DOCTYPE are similar, with the only exception of the "top" and "left" style attributes of the DIVs which render the map tiles.

2/ The demo loads OpenLayers 2.10 code via http. Installing and using it locally does not change anything.

3/ Upgrading to OpenLayers 2.11 (the latest) doesn't change anything either.

4/ Changing demo's javascript to be fully baseless AMD doesn't fix it.

5/ Ditto if importing directly the theme CSS instead of using deviceTheme; ditto if the demo doesn't require anymore deviceTheme as an AMD module but imports it with a <script> tag.

6/ Ditto for using manual parsing instead of parseOnLoad:true.

7/ Forcing programmatically map.map.olMap.viewPortDiv.style.position = "fixed" (in src.js, after the instantiation of the dojox/geo/openlayers/widget/Map) makes the map appear. Fine, but it doesn't have the correct size and position.

8/ In src.js, forcing calls of fitTo, resize, or updateMap at init time (in "ready") doesn't change anything.

9/ A google search on the terms "openlayers hidden" shows a couple of troubles related with OpenLayers when the parent container is initially hidden (in non-Dojo contexts). However, modifying demo.html by removing the visibility:hidden from the <body> doesn't do the trick.

10/ In dojox/geo/openlayers/tests/*.html (which do not use dojox.mobile), the addition of the HTML DOCTYPE has the same effect: the map is not visible.

11/ The same trouble holds for dojox/geo/charting/tests/*.html (I register a separate trac for it).

Last edited 7 years ago by Adrian Vasiliu (previous) (diff)

comment:2 Changed 7 years ago by Adrian Vasiliu

A similar issue hurts in some tests (not all) of dojox.geo.charting. Registered it separately in http://trac.dojotoolkit.org/ticket/15526 .

comment:3 Changed 7 years ago by cjolif

Milestone: tbd1.8
Owner: changed from Adam Peller to Patrick Ruzand
Status: newassigned

comment:4 Changed 7 years ago by Patrick Ruzand

same issue as #15526. (use of height:100%) What's worst here is that the Map comp itself overrides the parent node style to force it to height:100%.

comment:5 Changed 7 years ago by Patrick Ruzand

Resolution: fixed
Status: assignedclosed

In [28935]:

fixes #15525

comment:6 Changed 7 years ago by Adrian Vasiliu

Thanks pruzand. Do you also plan to fix demos/mobileOpenLayers, where the issue still hurts?

comment:7 Changed 7 years ago by Patrick Ruzand

In [28942]:

add doctype, fix map dimensions, refs #15525 !strict

comment:8 in reply to:  6 Changed 7 years ago by Patrick Ruzand

Replying to Adrian:

Thanks pruzand. Do you also plan to fix demos/mobileOpenLayers, where the issue still hurts?

oops, forgot to commit it. done.

comment:9 Changed 7 years ago by Adrian Vasiliu

Well, with this patch mobileOpenLayers works fine on desktop (Chrome and FF), and on a few Android versions I've tried. But on iPhone iOS 5.0.1 the map does not fill anymore the entire height, it leaves a large empty space on the bottom (in both portrait and landscape).

comment:10 Changed 7 years ago by Patrick Ruzand

Seems a problem specific to iphone+ios 5.x. I tested on iphone 4.3.3, as well as on ipad 5.0.1, + android 2.3.3, all were ok. will try to see what's wrong.

comment:11 Changed 7 years ago by Patrick Ruzand

In [28965]:

fix map dimensions (2nd try...), refs #15525 !strict

comment:12 Changed 7 years ago by cjolif

In [29314]:

refs #15525. Fixes to demo following library fixes.

Note: See TracTickets for help on using tickets.