Scrollbar disabled after certain modals (popups) appear

[shanaqui]

@ravenlune (9272ab2c-4b66-4b74-aebd-799725885d1c): "I am very tired right now, so forgive me if I'm awfully mistaken, but I've noticed a very weird thing just now... When I equip any item on the website, my scrollbar disappears, and I can't scroll the page at all. This happens when I click on the item, after I click equip or click the X on the pop-up my scrollbar goes blank (before I tried clear browser data it was even before the pop-up fully appeared). If it's worth anything, it goes blank for maybe a second or less after I click the item, then appears again with the pop-up, then disappears again when I close it. If I click on the tabs at the top (Stable or Items) or any of the links in the top bar, it doesn't come back. I have to refresh to get it back. This all happened starting today, never before. I don't understand why. I tried clear browser data, and I turned off all my extensions that could likely affect it, and nothing worked. I did install a new extension today but, again, disabling it didn't help. I am using the latest version on Chrome on Windows 10. Thanks for your work. I hope this made sense..."

Confirmed in Chrome on Windows 10.

[stuttste]

Hi Habitica team, new potential contributor here. I've confirmed this issue happens to me in Chrome and Internet Explorer on Windows 10 as well. I think this issue should be a good initial issue to dig into. Can I get confirmation from an admin to begin? I should be able to start looking into it this weekend.

[SabreCat]

We'll probably look at it ourselves too, but feel free to dig into it, @stuttste !

[robert-osborne]

Confirm this happens reliably on this page. But I've seen the disappearing scrollbars on other pages as well (just not reliably duplicatable). Especially switching to Shops -> Quests or Inventory -> Stable so this might be related.

[brightbold]

Can also confirm this happens (and appears to be consistently reproducible) in Chrome, Firefox, and Safari on Mac.

[Alys]

There's a report from @Ensorceled (4428e727-2a0e-4072-b578-fc28029b33f3) indicating that this bug might occur under other circumstances too:

"the scroll bars will sometimes disappear when I do an action (this is new behaviour):

1. Inventory -> Equipment equip an item and then the scroll bar disappears and I have to reload the page (refresh every time)
2. Switch to Shops -> Quests or Inventory -> Stable ... sometimes no scrollbar, have to refresh the screen (occasionally)
3. Some times scrollbars disappear in other situations, just not nearly as often."

[aszlig]

When closing the modal, the modal-open class is still active, which in turn suppresses the scrollbar. There is also this workaround which I'd guess doesn't work anymore since the upgrade of boostrap-vue to 2.0.0-rc.13 (although I haven't checked in detail).

[citrusella]

I don't know if it's the same cause (though the modal-open class is active), but I lost a scrollbar after RYA followed by a quest completion modal.

[stuttste]

I was unable to work on this as much as I had hoped, but I did at least confirm the issue is caused at some point after gearToEquip is assigned in the openEquipDialog() method of website/client/components/inventory/equipment/index.vue. Commenting out the code that assigns the value seemed to stop the modal from popping up, but the scrollbar remained active.

I'm unsure how helpful that is, but I thought I'd report it anyway. I'm new to Vue, so I got a bit confused where the code goes from there. I assume there is some code block that is triggered when the gearToEquip value is assigned.

[SabreCat]

Commit above is a temporary fix patching over the situation in just the Equip screen case. We'll want a better and more thorough solution, but it looks like it may be a bootstrap-vue bug? The bv::modal::hide event should be handling this.

[shanaqui]

Per a report in the bug guild, the scrollbar will also disappear on quest completion, so that modal also seems to be affected.

[shanaqui]

Update on the current behaviour from ravenlune:

Related to equipment scrolling issue: If I click on an item to equip it, then click outside of the pop-up to dismiss it, I am unable to scroll. If I click on an item and then either equip it or dismiss the popup with the X icon, I can scroll afterwards, but there is a noticeable blank space between the scrollbar and the rest of the page. It is as if the whole page's content has some kind of weird padding. These two issues usually do not overlap, but there was one instance where dismissing the pop-up by clicking outside caused both disabled scrolling and the blank space. Both problems remain when switching to other pages, until refresh.

[shanaqui]

Is this possibly to do with your temporary patch, @SabreCat?

"I wasn't sure what the reason for the smaller screen was, but today I realized it might be connected to the scroll bar bug on the equipment page. The screen got smaller when I changed my equipment (or to the euipment page, I'm not sure). Here's an image: https://snag.gy/zEKnLH.jpg It's not easy to see because of the similar colors, but you can see that I have only eight pics in a row, not nine.

When I changed to the bug guild, the smaller screen stayed: https://snag.gy/UyOzjd.jpg Usually the site expands all over the width of the browser window.

I'm using Firefox on Windows 10."

I've reproduced it as well, but only in Firefox, not in Chrome. Let me know if it needs a new github issue!

[SabreCat]

@shanaqui Hmm, the screenshots are broken links :\

[shanaqui]

@SabreCat Drat! I suspect the user has deleted them; Snag.gy normally sticks around longer than that.

Steps to reproduce: in Firefox, go to the Equipment page. Looks like: https://snag.gy/DTauI8.jpg
Click on an item and then click to equip it. Looks like: https://snag.gy/LyRucT.jpg

I promise this user will not delete the screenshots; it's Lisa. :)

[thebat137]

I've been having a problem recently that I think might be related --- when I first log in every day, after I've gone through all the initial popups (Record Yesterday's Activity, quest completions, check-in notifications), I can't scroll the page (and there is no scroll bar) until I refresh the window. This happens in both Chrome and Firefox. So hopefully whatever fix is made to this issue will also address its occurrence at rollover.

[cTheDragons]

Just to add another case scenario for testing, this also occurs when gifting gems to users.

[shanaqui]

Lizzy @Feyjane (fc627a8f-270a-44ca-bd19-00fc900c91c6): "I know there's been a lot of reported issues with the modal popups disabling scrolling after they're dismissed, but I found one that's really reproducable so I thought I'd share. In equipment, if I click on an item for my costume, but then dismiss the modal without selecting the item (clicking outside the modal, usually, after realizing I don't want to wear the thing), then I'm unable to scroll after the modal vanishes. But! If I select the item and then accept and wear it, I do get to scroll after the modal is dismissed. Seems like a difference between a 'cancel' action and an 'accept' action somewhere."

[randi2kewl]

I played a little commit roulette and the issue starts at this commit which really is nothing other than an upgrade to bootstrap and a small tweak. This confirmed that it could be a Boostrap-Vue bug (@aszlig pointed in the right direction). I then rolled back to "bootstrap-vue": "^2.0.0-rc.9" and stepped up in versions until it broke. The bug appears in version 2.0.0-rc.12 so 2.0.0-rc.11 is the last version without the modal bug.

I did check the issues for Bootstrap-Vue and found an issue that mentions not being able to scroll after doing something with a navigation route. I am new to Vue so figure someone who knows more might look at the ticket to see if it's the same bug. If it's not, I will create a bug ticket on BV's issues list.

Is this big enough of a deal to roll back to rc11?

[randi2kewl]

Added an additional PR that extends @SabreCat's hack. This includes the backdrop click.

[paglias]

@randi2kewl we would prefer to avoid rolling back to the previous release as we already made some code changes to adapt the code to this new one

[randi2kewl]

@paglias Figured that much. I already started digging into the bootstrap-vue code to see where the problem is happening. Hopefully, I'll find it and submit a PR to them and/or correct any changes in the Habitica code.

[gcantieni]

Can confirm this behavior in chromium and that it also disables all scrolling including through the mouse wheel and touch (for computers with touch screens)

[SabreCat]

I'll add a quick comment on the b-vue ticket you linked, @randi2kewl--my gut feeling is that our issue and bootstrap-vue/bootstrap-vue#2809 have the same root cause, but I don't know for sure. Thanks so much for digging into this, it's proving a real nuisance!

ETA: b-vue folks are looking into it: bootstrap-vue/bootstrap-vue#2809 (comment)

[randi2kewl]

@SabreCat @paglias

Update on where I am currently..seeing if it triggers anything from anyone that knows Vue better.

I noticed that if you remove the @change="onChange($event)" it works correctly exactly once but doesn't reopen. Trying to figure out if there is something async in this that is killing the hiding emitter for the modal. Specifically, this commit makes me think it has to do with it. Bootstrap-vue made a change in the breaking version that watches for whether the modal is already closing/showing due to them having edge cases of double closing/opening. I have a sneaky feeling we're running into that @change being called along with the hide so the hide emit dies. Completely making assumptions right now in case someone has thoughts.

[paglias]

I think that's due to the way we open this modal

[Alys]

Just confirming this is still happening with this report posted today by pizazznjazz (d68d7610-6f15-41cc-910d-7124ed561459):

"I'm not sure what is going on with the website but it wont let me scroll pages. Every once in a while I can get it to scroll but for the most part I am stuck on the top of the page. Sometimes I can navigate the page by selecting something and pressing tab (Which is what I had to do to send this). There is no scroll bar on the side."

Also reported by AnneLine (16a107de-d519-43ce-8c30-8da5cbcbb237):

"I think it is just a persisting problem, but sometimes I am unable to get the scrolling sidebar either. It is remedied by refreshing, but I wanted you to know the problem is intermittent but still persists! It may be the same thing that @pizazznjazz is experiencing..."

Also I'm about to rename this issue from "Scrollbar disabled after equipping item" to "Scrollbar disabled after certain modals (popups) appear"

[robert-osborne]

@Alys I am no longer able to reproduce this issue. It used to happen EVERY time in Chrome upon equipping an item, as of now it reliably DOES NOT happen.

[thebat137]

Same here for the rollover version --- the problem did not happen when I logged in today.

[citrusella]

I had it happen after a quest finished last night.

[thebat137]

Odd, it just happened for me again this morning. It's very strange that it's gotten inconsistent for me now. It used to happen every time.

I suspect maybe this might mean that it's the quest completion popup in particular that does it. I have been completing a quest a day for a while now, but yesterday, when the problem did not happen, I had not completed a quest, whereas today I did.

[SabreCat]

This should be fixed after a site update today--hold on, friends!

[SabreCat]

Fixed in 0874987