Vuetify: Cannot read property 'naturalHeight' of undefined when Parallax removed quickly after page load

Created on 18 Jul 2017  路  6Comments  路  Source: vuetifyjs/vuetify

Steps to reproduce

When a v-parallax component is removed before it's image finishes loading, an error is printed to the consle: "Uncaught TypeError: Cannot read property 'naturalHeight' of undefined"

Versions


Vue 2.4.1 Vuetify 0.14.2, Fedora 26, Chrome 59.0.3071.115

What is expected ?


No error should be logged.

What is actually happening ?


Uncaught TypeError: Cannot read property 'naturalHeight' of undefined error logged to console.

As far as I can tell, there are no other negative side-effects.

Reproduction Link

https://codepen.io/ajsutton/pen/zzQdpE

bug

Most helpful comment

Still error with v-parallax in last version 1.5.x :
Capture
Capture2

All 6 comments

If Parallax.js had:
objHeight () {
return this.$refs.img ? this.$refs.img.naturalHeight : 0
},

instead of:
objHeight () {
return this.$refs.img.naturalHeight
},

the error would go away, but I'm not sure what potential knock on effects that might have.

The error has changed in the 0.14.5 release, it's now:
vuetify.js?dc48:5494 Uncaught TypeError: Cannot read property 'complete' of undefined
at VueComponent.init (vuetify.js?dc48:5494)
at boundFn (vue.esm.js?efeb:178)

which is in the init method of parallax on the if (this.$refs.img.complete) { line.

When we set svg file (wich is converted in base64) in IE11 (ok in FF/chrome)
example : <v-parallax :src="require('@/assets/img/parallax-banner.svg')" height="380">
this.$refs.img.naturalHeight equal to 0 and the 'transform: translate(-50%, y );' is broken. (https://github.com/vuetifyjs/vuetify/blob/dev/src/components/VParallax/VParallax.js#L60)

replace by :

    objHeight: function objHeight() {
      if(this.$refs.img.naturalHeight){
        return this.$refs.img.naturalHeight
      }
      if(this.$refs.img.height){
        return this.$refs.img.height
      }
      return 0;
    }

If this solves another issue, please feel free to commit a PR @usb248

https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/639092/
I haven't time at the moment .. Can you make a fix ?
I think that : return this.$refs.img.naturalHeight || this.$refs.img.height || 0; can do the job

Still error with v-parallax in last version 1.5.x :
Capture
Capture2

Was this page helpful?
0 / 5 - 0 ratings