`body.vex-open` overflow hidden causing issues with scroll

HubSpot / vex

A modern dialog library which is highly configurable and easy to style. #hubspot-open-source

http://github.hubspot.com/vex/docs/welcome

MIT License

6.92k stars 494 forks source link

Open martin-adams opened 10 years ago

martin-adams commented 10 years ago

I looked into issues #20, #21, and #37, and still cannot figure out why “window.location.hash” won’t properly work with the vex dialog.

Maybe it’s best if I show what I mean. 1) Check out: http://www.tumbleweedhouses.com/products/amish-barn-raiser#step-7 2) Click on “Complete exterior” 3) If you click on “YES”, the browser (in my case Mac Chrome) initially takes you to: http://www.tumbleweedhouses.com/products/amish-barn-raiser#step-1, but then the browser takes you to the top of the page. Mac Safari doesn’t even take me to “#step-1”.

Vex—what a beautifully-designed product. Thank you, Adam!

adamschwartz commented 10 years ago

@martin-adams Thanks!

My guess is this is a regression of https://github.com/HubSpot/vex/issues/37, but I won’t know for sure until I dig a little deeper.

Thanks for including an example. That really makes it a lot easier for us to debug issues like this.

martin-adams commented 10 years ago

Here’s an updated javascript: http://cdn.shopify.com/s/files/1/0150/9532/t/23/assets/abr.js?48279 (it appears I needed to include “?48279” at the end for the most up-to-date version.) Sorry about that! Still same issue, though.

adamschwartz commented 10 years ago

After digging around a bit, it seems the issue is fixed when I remove the following CSS:

body.vex-open {
  overflow: hidden;
}

Until I have more time to look into the right global fix for this, you may want to use this workaround.

martin-adams commented 10 years ago

It’s actually removed, as can be seen when you include the “?48279” tag at the end of the css. (I tried that CSS in a previous edition).

adamschwartz commented 10 years ago

Yes, but on that page you’re also bringing in:

<link href="//cdn.shopify.com/s/files/1/0150/9532/t/23/assets/vex.css?48279" rel="stylesheet" type="text/css"  media="all"  />

This has that code in the last three lines.

martin-adams commented 10 years ago

That did it! Thanks for catching that, Adam!

Thanks so much... :+1: Again, amazing product, thanks for having created it!

adamschwartz commented 10 years ago

No problem. I’ll leave this issue open until we have a better general solution.

Fernando9 commented 9 years ago

I was experiencing the same problem with a modal causing that. My solution was to change body.vex-open { overflow: auto; }

But in this case I didn't affected the CSS file in vex. I placed the code in another css file that gets render after the vex.css