Nuxt.js: nuxt-link prevents correct native scaling of inline svg (also ignores other styling)

[dimitrieh]

Version

v1.4.0

Reproduction link

https://github.com/dimitrieh/nuxt-svg-problem

Steps to reproduce

1. Use an svg that stretches across the whole viewport width and scales with it. See the reproduction repo
2. Spin up project
3. Open browser window larger than 1680px wide
4. Click normal link to have expected behaviour
5. Click nuxt-link to have actual behaviour
6. Svg gets no longer scaled to viewport width (also background does no longer change?)

What is expected ?

What is actually happening?

_{This bug report is available on Nuxt.js community (#c6978)}

[manniL]

Can reproduce this, even in production mode and with viewport set through nuxt.config.js (Firefox 59.0.2 (64-bit) on Ubuntu 17.10).

[manniL]

You can fix the unchanged background by using two different layouts thought :relaxed:

[dimitrieh]

thanks @manniL for trying it out!

Wouldn't want a different layout per page right? Or is it... I think I am not using layouts very well yet. Layouts should be per page correct? Anyway, I digress!

It would be great to see what is causing this in the Nuxt-link element as it is preventing styles from working correctly

[manniL]

Sure thing :relaxed:

I'd use layouts if you change the "basic design" of a page. Otherwise, you can just go with different CSS classes. I use layouts rarely, only when I switch between a "design with sidebar" and one without (for example).

Unfortunately, I don't know why the internal linking disturbs the SVG style.

But in the end, nuxt-link uses router-link under the hood.
Does the same happen when you use a Vue application with vue-router? :thinking:

[dimitrieh]

@manniL I am less familiar with vue itself ;), so far just fiddled around with nuxt. Would you be able to try that out?

[manniL]

The color issue still occurs in vue (but I guess that, because both pages modify the body tag. Should not happen with global css, different layouts or simply classes).

The SVG error is not present though present as well, instantly limiting the svg on 1680px width.

Pretty sure this is a vue-related bug.
When I change the viewBox settings manually to 0 0 1680 217, the SVG is displayed correctly.

[dimitrieh]

@manniL I think you are right 👍 especially when reading about the nuxt-link on https://nuxtjs.org/api/components-nuxt-link/

At the moment, is the same as , so we recommend you to see how to use it on the Vue Router documentation.

Would you be able to create a bug at the Vue repository at https://new-issue.vuejs.org/ ? As it needs the minimal reproduction environment and Vue version as well?

[manniL]

Will do this soon, as I already have the repo ready :yum:

[benoitemile]

Hi there, I wasn't able to reproduce svg issue on macOS chrome 66 but for the body background color, I've made you a pull request.
https://github.com/dimitrieh/nuxt-svg-problem/pull/1

The "problem" you're having is that you're trying to set body bg color in two part of your component without any "priority", so when vue-router is doing his magic, it's appending the new component style in the body, if red is second, then it's going to be red all the way, if black is the second, it's going to be black all the way. Vue-router isn't "unloading" css on route change, and this is good because if not, we would have some really weird transition with some FOUCs.

So I avoided the issue by adding a class to the body, so if component needs a special class on the body, class will be added on route change and you'll take advantage of that class to style what you want to do. The sample is on body but it's available for everything that is styled twice without priority.

Hope this helps

[dimitrieh]

thanks @benoitemile I accepted the merge request! That clears things up to be sure!

As for the svg problem, which is the main issue ;)

Please check it out by switching between the 2 pages by either using the nuxt-link links or the normal link links..

While doing that change your viewport size, you'll notice things changing differently or not changing:

Here is another gif showing this off:

[benoitemile]

viewbox="0 0 1680 217" 🤣 i think that 1680 is hurting, i'm trying to fix thix

[dimitrieh]

@benoitemile this is just the viewbox the svg was given. It should not be the problem

with normal links <a> the svg is working fine, but when using <nuxt-link> it is not working correctly

[benoitemile]

Solved by using a dynamic viewbox, I understand that the behavior shouldn't be inconsistent like this, but I think the nuxt-link is the "normal" behavior, at least, it respect what's being given by the viewbox property.

https://github.com/benoitemile/nuxt-svg-problem/commit/3cc544f59f05ad10dad2c099c3326c1ff56cb186
It's dirty, I just wanted it sorted, you should use computed and at least factor what's possible.

I think when Vue is inserting the svg, browser "compute" it differently. It's not related to nuxt link, it's vue core, we should call Sarah Drasner the expert :)

I reverted all the nasty things, and just put a basic v-if, and it has the awkward behavior.
https://github.com/benoitemile/nuxt-svg-problem/commit/2745e2cbab1d0ff6969c67cc418dcb4367069571

[dimitrieh]

thanks for checking this out @benoitemile I wonder though if this is the right way to go about it 🤔

[benoitemile]

fixed, you'll be disappointed :
https://github.com/benoitemile/nuxt-svg-problem/commit/058fd9918a1a755bd6d20d574aa1708d521da88e

ahahahah

there is your PR https://github.com/dimitrieh/nuxt-svg-problem/pull/2

[dimitrieh]

@benoitemile wowwwwwww are you serious!!!! 🤣 checking this out now!

[dimitrieh]

@benoitemile thanks so much 🙏

TIL: viewBox instead of viewbox

[benoitemile]

you're welcome, it was fun

[manniL]

OMG. How could I miss that :see_no_evil:

Good job @benoitemile! :+1:

[Atinux]

Thank you so much for helping out @benoitemile & @manniL

[lock[bot]]

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.