fix: remove layout shift on the cute logo

vuejs / docs

📄 Documentation for Vue 3

https://vuejs.org

Other

2.81k stars 4.1k forks source link

fix: remove layout shift on the cute logo #2845

Closed prashantpalikhe closed 2 weeks ago

prashantpalikhe commented 2 weeks ago

Description of Problem

Because there is not dimension specified for the logo, we get a massive layout shift

Proposed Solution

Add the aspect ratio to the cute logo's style

Additional Information

netlify[bot] commented 2 weeks ago

Deploy Preview for vuejs ready!

Name	Link
Latest commit	b81f7e3bfbe1fd1e0b235202fe7b1f8fedbf9de0
Latest deploy log	https://app.netlify.com/sites/vuejs/deploys/66314de932971a0008e1b7ea
Deploy Preview	https://deploy-preview-2845--vuejs.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

yyx990803 commented 2 weeks ago

Unfortunately this doesn't really remove the layout shift because the v-if is only toggled after mount / hydration.

This is because we want to avoid sending a request for the image if the URL does not have the ?uwu query string, so it cannot be rendered during SSG.

I'll think of another way to get around this.