first import
This commit is contained in:
61
sites/all/modules/openlayers/docs/IE.txt
Normal file
61
sites/all/modules/openlayers/docs/IE.txt
Normal file
@@ -0,0 +1,61 @@
|
||||
|
||||
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.
|
||||
Reference in New Issue
Block a user