Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Height should take into account padding-top and padding-bottom #21

Open
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

francescom
Copy link

When detecting if element is at bottom, the height should take into account padding-top and padding-bottom, otherwise it won't work, and the page will "bounce" when you drag elements with padding (when they are at the bottom scroll position)

To check if element is at bottom, the element height must take into account margin-top and margin-bottom. Otherwise it doesn't work if element has padding (not sure about margins)
Height must take into account padding
@lazd
Copy link
Owner

lazd commented Mar 7, 2016

Nice find! Can you include an example of this failing so I can test it against the new code and old code? Unfortunately we don't have automated tests in iNoBounce, so we need to poke at it and make sure it does what we expect it to, so examples help.

@francescom
Copy link
Author

Yes, I can revert the code already patched to the previous state for some time (but not for long).

You can test here:

http://arslan.it/test2/?c=1

Drag the text up till it reaches the end. Then drag again and it will catch the whole page and overscroll (bounce).

While if you change the link to the script from

<script type="text/javascript" src="bower_components/inobounce/inobounce.min.js"></script>

to

<script type="text/javascript" src="bower_components/inobounce/inobounce.js"></script>
(use the patched, non minified, version)

it will stop bouncing the page.

@lazd
Copy link
Owner

lazd commented Mar 7, 2016

Please just provide a file examples/padding.html that reproduces the issue with this pull request, no need to modify your site! Thanks!

@francescom
Copy link
Author

Site is already modified and is in test/staging area, no problem.

@francescom
Copy link
Author

I have added style="padding:64px" to the app.html example.

padding.html.zip

If you drag up to the last line, then leave it. Then drag up again, it will bounce the page.

To notice it, you have to look at the top bar. The top bar will get out of the page when you drag, that's the only difference between a correct drag and a full page "bounce".

@francescom
Copy link
Author

Added a screenshot
screenshot

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants