62 lines
2.4 KiB
Plaintext
62 lines
2.4 KiB
Plaintext
|
|
Using the OpenLayers Javascript from the OpenLayers module can present some
|
|
problems with rendering vector layers in IE.
|
|
|
|
The root cause of the issue:
|
|
|
|
Internet Explorer has a thing called VML: Vector Markup Language, which it uses
|
|
to draw graphics. VML is what you use in IE: canvas4ie is way slow, google maps
|
|
uses VML to draw routes, and OpenLayers uses it to draw vectors.
|
|
|
|
VML elements are styled by creating CSS-like styles in a namespace. OpenLayers
|
|
creates an ol: namespace and then creates styles like ol:line ol:circle, etc.
|
|
|
|
To do this, it has to access document.namespaces. Document.namespaces is not
|
|
always around: notably, you can't depend on it being around before
|
|
document.ready.
|
|
|
|
But, sometimes document.namespaces *is* around before document.ready and that's
|
|
the thing that messed up my worldview. So, the theory was, there are modes.
|
|
Something in HTML can prevent document.namespaces being filled in before
|
|
document.ready.
|
|
|
|
Here's how it goes.
|
|
|
|
### $( or $(document).ready()
|
|
|
|
* If there is a broken image on the page, then namespaces is not filled in.
|
|
* If the page has no broken images, then document.namespaces is accessible
|
|
|
|
### document.load()
|
|
|
|
* document.namespaces is always filled in.
|
|
|
|
### 31 stylesheets
|
|
|
|
IE cannot handle more than 31 stylesheets on a page at a time. This is clearly
|
|
the devil's work, but it persists beyond IE8. If there are 31 stylesheets and
|
|
you run an OpenLayers map, it cannot add another stylesheet to initialize its
|
|
VML namespace. Therefore, the map breaks. You must aggregate your CSS.
|
|
|
|
### The Fix
|
|
|
|
We can't move openlayers to document.load() because it is dependent on the
|
|
Drupal behaviors stack, that runs on document.ready(). We need to just define
|
|
document.namespaces before OpenLayers asks its VML renderer whether the current
|
|
browser is capable of rendering VML (a task it tries to complete by calling
|
|
!!(document.namespaces))
|
|
|
|
### Other Fixes
|
|
|
|
Adding a tag
|
|
<code><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /></code>
|
|
will allow IE8 to render vectors if it doesn't render them correctly on a normal
|
|
pageload. Note that this must be the first element inside the header tag.
|
|
|
|
### Image Opacity
|
|
|
|
The opacity of image pointers are created with IE filters, which do not function
|
|
correctly when combined with semi-transparent PNG images. Thus it is necessary
|
|
to set opacity of such elements to 1.0 in order for alpha-transparent PNG images
|
|
to appear correctly.
|