You are here

IE.txt in Openlayers 6.2

Same filename and directory in other branches
  1. 7.2 docs/IE.txt
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.

File

docs/IE.txt
View source
  1. Using the OpenLayers Javascript from the OpenLayers module can present some
  2. problems with rendering vector layers in IE.
  3. The root cause of the issue:
  4. Internet Explorer has a thing called VML: Vector Markup Language, which it uses
  5. to draw graphics. VML is what you use in IE: canvas4ie is way slow, google maps
  6. uses VML to draw routes, and OpenLayers uses it to draw vectors.
  7. VML elements are styled by creating CSS-like styles in a namespace. OpenLayers
  8. creates an ol: namespace and then creates styles like ol:line ol:circle, etc.
  9. To do this, it has to access document.namespaces. Document.namespaces is not
  10. always around: notably, you can't depend on it being around before
  11. document.ready.
  12. But, sometimes document.namespaces *is* around before document.ready and that's
  13. the thing that messed up my worldview. So, the theory was, there are modes.
  14. Something in HTML can prevent document.namespaces being filled in before
  15. document.ready.
  16. Here's how it goes.
  17. ### $( or $(document).ready()
  18. * If there is a broken image on the page, then namespaces is not filled in.
  19. * If the page has no broken images, then document.namespaces is accessible
  20. ### document.load()
  21. * document.namespaces is always filled in.
  22. ### 31 stylesheets
  23. IE cannot handle more than 31 stylesheets on a page at a time. This is clearly
  24. the devil's work, but it persists beyond IE8. If there are 31 stylesheets and
  25. you run an OpenLayers map, it cannot add another stylesheet to initialize its
  26. VML namespace. Therefore, the map breaks. You must aggregate your CSS.
  27. ### The Fix
  28. We can't move openlayers to document.load() because it is dependent on the
  29. Drupal behaviors stack, that runs on document.ready(). We need to just define
  30. document.namespaces before OpenLayers asks its VML renderer whether the current
  31. browser is capable of rendering VML (a task it tries to complete by calling
  32. !!(document.namespaces))
  33. ### Other Fixes
  34. Adding a tag
  35. will allow IE8 to render vectors if it doesn't render them correctly on a normal
  36. pageload. Note that this must be the first element inside the header tag.
  37. ### Image Opacity
  38. The opacity of image pointers are created with IE filters, which do not function
  39. correctly when combined with semi-transparent PNG images. Thus it is necessary
  40. to set opacity of such elements to 1.0 in order for alpha-transparent PNG images
  41. to appear correctly.