search

kylewetton / image-compare-viewer

Compare before and after images, for grading and other retouching for instance. Vanilla JS, zero dependencies.
https://image-compare-viewer.netlify.com
MIT License
553 stars 34 forks source link

Bugfix/reserve scroll gap #32

Closed kylewetton closed 3 years ago

nqst commented 3 years ago

Hey Kyle! Thanks for making an awesome package :)

I noticed that body still jumps — even when I'm using the latest version. Does this fix helped on your end? I'm able to reproduce bug here, on every demo: https://image-compare-viewer.netlify.com

Note: testing on Mac via enabling scrollbar in Settings → General → Show Scroll bars: Always

patersam1 commented 3 years ago

Noticed this issue too, looks like the cdn files on https://unpkg.com/image-compare-viewer haven't been updated to include this fix?

btw love the package too!

phisch commented 3 years ago

It looks like this was merged 2 minutes after the first and only release was built.

kylewetton commented 3 years ago

Ah wild,

@patersam1 when clicking on the cdn link, it brings up 1.4.1 which has that feature. Not sure what's going on here https://unpkg.com/image-compare-viewer@1.4.1/dist/image-compare-viewer.min.js

So do you reckon this change on line 68 didn't do the trick? https://github.com/kylewetton/image-compare-viewer/blob/d851705b97d9afe2f2ff9551766575e13a80f008/src/scripts/index.js

I only had one person come back and said it worked for them

kylewetton commented 3 years ago

@nqst @patersam1 @phisch

Not sure what happened there. Added more sauce to version 1.5.0 https://unpkg.com/image-compare-viewer@1.5.0/dist/image-compare-viewer.min.js

kylewetton commented 3 years ago

@nqst @patersam1 @phisch Sorry for the follow-up message, as a thought, this fix will add 15px padding on the body element, so be sure that your CSS doesn't conflict that it.

stephane commented 3 years ago

I have the issue of the "body jump" with version 1.5.0 (not with v1.3.5) so I think the option 'reserveScrollBarGap' should be passed by this.settings so we could enable this trick only when required.

kylewetton commented 3 years ago

@stephane does your body have any inline styles (without Image Compare Viewer)?

stephane commented 3 years ago

No it was a Bootstrap v5 theme with navbar, I'll try to provide an example in the next weeks.

stephane commented 3 years ago

I confirm the body DOM element doesn't use any inline styles but the click on the slider button adds: