[$100] Screen flicker in dropdown

[gondzo]

Found a weird issue with notifications dropdown.
When hover with mouse to the dropdown list global browser scrollbar disappears which causes flickering http://take.ms/g53EJ
@vikasrohit Is there anything in changes to the Dropdown component that could cause this (the one that was moved to react-components repository)?

Reported by @maxceem

[vikasrohit]

It can be @gondzo However, I would like to know if this does not happen without those changes.

[gondzo]

It doesn't > http://connect-test02.topcoder-dev.com
@maxceem is looking into possible (quick) fixes to get this before the release

[maxceem]

I've checked it in the notification branch where the dropdown component was in the connect-app. Before moving to react-components.
This issue with the flickering was not there.
Also, this issue was fixed #1508 in that version.

This issue #1497 presents in the version before moving.

[vikasrohit]

I have observed that when you move out from the header of the notifications dropdown, it does not flicker. So, IMO, it is something related with internal scroll bar and its corresponding div.

[vikasrohit]

Its a class noScroll that is being added as soon as mouse enters the notifications-dropdown-body section.

[maxceem]

Oh yes, so this issue is not related to the replaced dropdown component.
The new code was added to NotificationsDropdownContainer to prevent scrolling browser window when scrolling inside the notifications drop-down reaches the end http://take.ms/QBp1Z

Though now this flickering is introduced.

I propose to remove the code which adds noScroll class for the current release. So window WILL be scrolled if we keep scrolling in notifications window when it reaches the end for now.

After release, this could be implemented different ways. In my opinion, the best way is to preventDefault/stopPropagation when we reach the end scrolling area inside the notifications drop-down.
Also, there is a decision to make. If there is no scroll in notification dropdown, should we block global scrolling or no?

[vikasrohit]

Agree with @maxceem for getting rid of noScroll.

However, @maxceem I think we can always do stopPropagation in notification container to prevent scroll event from moving up.

[maxceem]

@vikasrohit amazing idea with stopPropagation, though I've checked it and it doesn't work :-(.
In a good case, it's just because how react handles onWhell event. So we still have a chance to add a native listener with addEventListener and control useCapture.
In the worst case it's the a feature of browser how they propagate this particular event. Then we would have to check if we reach the end of scrolling.

As I don't have time for today (before release) to take care of this ticket properly. I can just remove noScroll for now or leave it for somebody else.

[gondzo]

We can go with removing no-scroll for now and revisit this after the release, in CF6

…

On Dec 22, 2017 1:09 PM, "maxceem" ***@***.***> wrote: @vikasrohit <https://github.com/vikasrohit> amazing idea with stopPropagation, though I've checked it and it doesn't work :-(. In a good case, it's just because how react handles onWhell event. So we still have a chance to add a native listener with addEventListener and control useCapture. In the worst case it's the a feature of browser how they propagate this particular event. Then we would have to check if we reach the end of scrolling. As I don't have time for today (before release) to take care of this ticket properly. I can just remove noScroll for now or leave it for somebody else. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1519 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AC6QfobRhl9kJ5XRcNpiKVfwCLEnMz_vks5tC5wVgaJpZM4RK3km> .

[vikasrohit]

👍

[vic-georgiev]

Ok, so - to have such a behavior, it means that something is making the whole body of the page scrollable, and adding/removing the "noScroll class is causing the window to fall back between bounds. I would actually think a slight modification of the CSS to disable only vertical scroll would remedy the issue. What environment are you guys testing this on? Can't reproduce it on my local machine (Mac, Chrome/Safari/Firefox - all latest). There are some other problems with CSS sizing of elements in top bar. I would like to dive deeper as the main reason for the "noScoll" is the breaking UX behavior - overscrolling the page under while reading notifications is very disruptive/hard to use.

If the issue is from the noscroll class, and we can't figure out what is causing vertical scroll, we can remove it as a last chance. For the moment I'd like to investigate further.