Better IE compatibility

dist/vue-resize.css

@@ -11,4 +11,5 @@
   pointer-events: none;
   display: block;
   overflow: hidden;
+  opacity: 0;
 }

docs-src/src/App.vue

@@ -1,8 +1,12 @@
 <template>
   <div id="app">
     <div class="counter">Resize: {{ count }}</div>
-    <div class="resized">
-      <textarea></textarea>
+    <div>
+      <button @click="show = !show">Toggle</button>
+      <button @click="changeSize">Change CSS size</button>
+    </div>
+    <div class="resized" v-if="show">
+      <textarea :style="{ width: `${width}px` }"></textarea>
       <resize-observer @notify="handleResize"></resize-observer>
     </div>
   </div>
@@ -15,12 +19,19 @@ export default {
   data () {
     return {
       count: 0,
+      show: true,
+      width: 300,
     }
   },
 
   methods: {
     handleResize () {
       this.count ++
+      console.log('handle')
+    },
+
+    changeSize () {
+      this.width = Math.round(Math.random() * 400) + 100
     },
   },
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-resize",
   "description": "Detect DOM element resizing",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "author": {
     "name": "Guillaume Chau",
     "email": "[email protected]"

src/components/ResizeObserver.vue

@@ -3,6 +3,10 @@
 </template>
 
 <script>
+import { getInternetExplorerVersion } from '../utils/compatibility'
+
+const isIE = getInternetExplorerVersion() !== -1
+
 export default {
   name: 'resize-observer',
 
@@ -20,8 +24,8 @@ export default {
 
     removeResizeHandlers () {
       if (this._resizeObject && this._resizeObject.onload) {
-        if (this._resizeObject.contentDocument) {
-          this._resizeObject.contentDocument.defaultView.addEventListener('resize', this.notify)
+        if (!isIE && this._resizeObject.contentDocument) {
+          this._resizeObject.contentDocument.defaultView.removeEventListener('resize', this.notify)
         }
         delete this._resizeObject.onload
       }
@@ -33,7 +37,6 @@ export default {
       this._w = this.$el.offsetWidth
       this._h = this.$el.offsetHeight
     })
-    const isIE = navigator.userAgent.match(/Trident/) === 'Trident'
     const object = document.createElement('object')
     this._resizeObject = object
     object.setAttribute('style', 'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;')
@@ -67,5 +70,6 @@ export default {
   pointer-events: none;
   display: block;
   overflow: hidden;
+  opacity: 0;
 }
 </style>

src/utils/compatibility.js

@@ -0,0 +1,25 @@
+export function getInternetExplorerVersion () {
+  const ua = window.navigator.userAgent
+
+  const msie = ua.indexOf('MSIE ')
+  if (msie > 0) {
+    // IE 10 or older => return version number
+    return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10)
+  }
+
+  const trident = ua.indexOf('Trident/')
+  if (trident > 0) {
+    // IE 11 => return version number
+    const rv = ua.indexOf('rv:')
+    return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10)
+  }
+
+  const edge = ua.indexOf('Edge/')
+  if (edge > 0) {
+    // Edge (IE 12+) => return version number
+    return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10)
+  }
+
+  // other browser
+  return -1
+}