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

Scrolling through timeline is jumping when using Bulma #95

Closed
dbudwin opened this issue Dec 22, 2020 · 3 comments
Closed

Scrolling through timeline is jumping when using Bulma #95

dbudwin opened this issue Dec 22, 2020 · 3 comments

Comments

@dbudwin
Copy link

dbudwin commented Dec 22, 2020

To start, I believe this is a different Bulma issue than the one highlighted in issue #56 (which doesn't seem to be a problem for me).

Issue

While scrolling through the timeline, when I get to the start of a new VerticalTimelineElement, it will force the page to scroll further to fully accommodate showing the next VerticalTimelineElement, making the scrolling jump. I believe my use of Bulma is interfering with the timeline since removing my Bulma import resolves the issue.

I verified this issue occurs in both Firefox and Chrome.

Reproduce

  1. Pull down https://github.com/dbudwin/BudwinWebsite/tree/TimelineJumpiness
  2. Run npm install
  3. Run npm run dev
  4. Open the dist/index.html file
  5. Scroll towards the bottom and notice the jumpiness
  6. Comment out @import "bulma"; in index.scss, then reload page, notice how it scrolls smoothly

Expected Behavior

I would like to be able to use Bulma, and have smooth scrolling when scrolling through my timeline.

Notes

I changed my installed version of Bulma from 0.9.1 down to 0.8.0 and then to 0.7.5 to see if that would resolve the issue, but no luck.

P.S., this is a really cool package, and it's been fun to use so far 👍

@stephane-monnot
Copy link
Owner

Thank you for your report.

I think I will change the classname is-hidden because is too common name.

I created a PR. I just added :

.vertical-timeline--animate .vertical-timeline-element-icon.is-hidden,
.vertical-timeline--animate .vertical-timeline-element-content.is-hidden {
    display: block !important;
}

@dbudwin
Copy link
Author

dbudwin commented Dec 24, 2020

Thank you @stephane-monnot. I can confirm that does resolve my issue! Should I anticipate a change like this making it into this project's codebase in the future?

@stephane-monnot
Copy link
Owner

I think we need to rename the class is-hidden to vertical-timeline-is-hidden. If I have time, I will publish a fix
in the next release.

dbudwin added a commit to dbudwin/react-vertical-timeline that referenced this issue Dec 24, 2020
This issue stemmed from bug stephane-monnot#95 related to jumping scrolling in SPA's that use Bulma.  This is implementing the suggested fix.

Co-authored-by: Stéphane Monnot <[email protected]>
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

No branches or pull requests

2 participants