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.

Sign up for GitHub

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

Jump to bottom

[ToC] mobile, scrolling page causes the ToC dropdown to vibrate #2545

Closed
shixiedesign opened this issue May 27, 2020 · 3 comments
Closed

[ToC] mobile, scrolling page causes the ToC dropdown to vibrate #2545

shixiedesign opened this issue May 27, 2020 · 3 comments
Assignees
@kennylam
Labels
bug Something isn't working dev Needs some dev work package: react Work necessary for the Carbon for IBM.com react components package severity 4 Affects minor functionality, no workaround needed
Milestone
Sprint 20-25

Comments

@shixiedesign
Copy link
Contributor

shixiedesign commented May 27, 2020 •
edited
Loading

I'm not sure if this is a bug or an unavoidable behavior - it seems the ToC dropdown is vibrating up and down when the page is scrolling, revealing a bit of the page below on above the dropdown.

To replicate this bug:

  1. go to https://ibmdotcom-react-canary.mybluemix.net/iframe.html?id=patterns-sub-patterns-table-of-contents--with-heading-content
  2. narrow window to see mobile ToC (in dropdown form)
  3. open dropdown to select the last item, watch the scrolling vibration
  4. repeat by opening the dropdown and select the first item.

May-27-2020 12-18-19
@shixiedesign shixiedesign added the bug Something isn't working label May 27, 2020
@shixiedesign shixiedesign changed the title [ToC] mobile scrolling page vibrates to the position of ToC dropdown [ToC] mobile, scrolling page causes the ToC dropdown to vibrate May 27, 2020
@RobertaJHahn RobertaJHahn added dev Needs some dev work severity 4 Affects minor functionality, no workaround needed labels May 28, 2020
@ltitle ltitle mentioned this issue May 28, 2020
Closed
5 tasks
@RobertaJHahn RobertaJHahn added this to the Sprint 20-13 milestone May 29, 2020
@raphaelamadeu-zz raphaelamadeu-zz self-assigned this Jun 30, 2020
@raphaelamadeu-zz
Copy link
Contributor

@shixiedesign
I'm trying to reproduce this issue,
can you share which browser you got this bug on?

Thanks!

@raphaelamadeu-zz
Copy link
Contributor

I've tried on the lastest version of Chrome, and this issue is not happening, probably it's not a bug on our side.

@RobertaJHahn
Copy link

RobertaJHahn commented Jul 29, 2020 •
edited
Loading

@shixiedesign We will close this bug if we don't hear from you by Aug 7.

cc: @raphaelamadeu

@RobertaJHahn RobertaJHahn added the package: react Work necessary for the Carbon for IBM.com react components package label Aug 4, 2020
@raphaelamadeu-zz raphaelamadeu-zz removed their assignment Aug 13, 2020
@kennylam kennylam self-assigned this Dec 5, 2020
@kennylam kennylam mentioned this issue Dec 7, 2020
Merged
kodiakhq bot pushed a commit that referenced this issue Dec 7, 2020
@kennylam
fix(ToC): fix mobile styles (#4636)
9105895 
### Related Ticket(s)

#2545 

### Description

This fixes an issue where the section navigation dropdown is incorrectly positioned, allowing contents of the page to be seen behind it when scrolling.

### Changelog

**Changed**

- top positioning of section navigation dropdown

**Removed**

- {{removed thing}}

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "package: styles": Carbon Expressive -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@kennylam kennylam

Labels
bug Something isn't working dev Needs some dev work package: react Work necessary for the Carbon for IBM.com react components package severity 4 Affects minor functionality, no workaround needed
Projects
None yet
Milestone
Sprint 20-25
Development

No branches or pull requests
8 participants
@kennylam @jeffchew @shixiedesign @ljcarot @raphaelamadeu-zz @oliviaflory @RobertaJHahn @andysherman2121