search

vue-final / vue-final-modal

🍕Vue Final Modal is a tiny, renderless, mobile-friendly, feature-rich modal component for Vue.js.
https://vue-final-modal.org
MIT License
887 stars 95 forks source link

Background shifts when modal is opened (if background has scrollbar) #23

Closed ul8 closed 3 years ago

ul8 commented 3 years ago

On your examples page (https://vue-final-modal.org/examples) the background moves slightly when opening a modal (because the page scroll bar is removed). This applies only if "lock scroll" mode is enabled.

See this recording:

https://www.dropbox.com/s/h3xw6yj1ltf2noe/CleanShot%202020-11-28%20at%2015.38.05.gif?dl=0

This is not the end of the world but definitely a bit distracting.

Thanks for your great work so far! I hope to be able to use this as a replacement for vue-js-modal soon.

Tested on both Firefox and Chrome (latest)

hunterliu1003 commented 3 years ago

Hi @ul8 ,

Thanks for your feedback. Seems the issue only happens on Windows. I will study how other frameworks solve this problem.

ul8 commented 3 years ago

Actually I’m on MacOS (Mojave), sorry forgot to mention that.

hunterliu1003 commented 3 years ago

Oh! I guess you set always showing scroll bar right?

hunterliu1003 commented 3 years ago

Hi @ul8,

I found that

  1. Bootstrap Vue add padding-right: 17px to avoid the background shifts.
  2. Vuetify using window.addEventListener('wheel', ...) to disable scroll behavior.

Currently, I prefer to use the second option.

If you have a better way, please let me know.

ul8 commented 3 years ago

Oh! I guess you set always showing scroll bar right?

If you are referring to the MacOS system preference: No, it's set to "Automatically based on mouse or trackpad". However I do use an external mouse, I guess that activates it then.

Second option sounds more clean to me, agreed! I'm not aware of another way.

Thanks!

Mini-ghost commented 3 years ago

I think padding-right: 17px maybe is not a good solution for all device, if user use CSS custom scrollbar width.

hunterliu1003 commented 3 years ago

Hi @ul8,

I just published v0.19.1 for Vue 2.x. If you are using Vue 3, you have to wait a few day.

ul8 commented 3 years ago

Tested and confirmed to work. Many thanks for the quick help, @hunterliu1003!

hunterliu1003 commented 3 years ago

The issue was fixed and published at v1.6.2 for Vue 3

matamune94 commented 1 month ago

Let's make [it](padding-right: 17px; overflow: hidden;) a class so I can nest it in my class to fix it, thanks For example: .popup_open { padding-right: 17px; overflow: hidden; }