Vuetify: Parallax v-parallax error using option 'src'

Created on 25 May 2017 · 6Comments · Source: vuetifyjs/vuetify

Steps to reproduce

<v-parallax src="http://oxygennacdn3.oxygenna.com/wp-content/uploads/2015/11/18.jpg" height="300"></v-parallax>

This 'v-parallax' tag does NOT work if the source image is included inside the _src_ tag.

Versions

Vuetify v. 0.12.0

What is expected ?

The image is expected to be seen on the entire content of the div in which it is added.

What is actually happening ?

Only HALF of it is shown, from the right side. Leaving an empty space...

Reproduction Link

To reproduce this, do not use the CSS 'background: url("XXX")', use the tag option _src_.

How do I fix this ? I need to add dymic images url. I don't want to resort to CSS only.

needs reproduction

Source

ghost

Most helpful comment

THANKS YOU.

I updated the file in "node_modules" and it worked.
(not recommended for now, but until it is pushed for npm update/upgrade, then I'll stick with that).

Parallax loads properly on first page load.

ghost on 25 May 2017

😄2 🎉1 👍1

All 6 comments

Please provide an example on www.jsfiddle.net or www.codepen.io that reproduces the problem. If necessary, create a repository for us to clone with a minimal reproduction. repositories of actual projects will generally not be accepted.

nekosaur on 25 May 2017

I've made a small tweak to the css (I needed to do this anyways) so that on load the image won't appear to shift. I tested dynamic images and everything looks good.

johnleider on 25 May 2017

I tried using jsfiddle, but I can't reproduce the error with this website.
https://jsfiddle.net/j3bak44k/

The problem, is : while having "vue-router" installed, if I load a page for the first time via URL on the browser, then the image is cut in half inside the tag "v-parallax".

The parallax works back if I go on another component, then re-load the previous component containing the "v-parallax" tag.

ghost on 25 May 2017

The above issue should work just right after the fix.

johnleider on 25 May 2017

THANKS YOU.

I updated the file in "node_modules" and it worked.
(not recommended for now, but until it is pushed for npm update/upgrade, then I'll stick with that).

Parallax loads properly on first page load.

ghost on 25 May 2017

😄2 🎉1 👍1

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord