BUG: Dropdown recalculateDimensions flickers in Firefox and Edge in windows 10, and occasionally on chrome as well.

[AnupamKhosla]

Open this demo https://jsfiddle.net/51zm7ef8/1/ and then click on Rent dropdown. Now toggle between Rent a office and Popular locations. In Firefox 92.0 and Edge on windows 10 you'd see the scrollbar flickering as following:

Flickering Gif animation

This is not seen on chrome for this demo, but I originally discovered it in chrome latest version. The issue is not setTimeout here(see another demo: https://jsfiddle.net/fh6pg9qy/) -- The dropdown still flickers, but the scrollbar is shown for lesser time. What seems to happen here is that dropdown.recalculate fires after a few miliseconds delay from the moment it's called., which causes the tab content to go below the tab trigger links momentarily, when they are bigger in size than the dropdown inline style.width.

As I mentioned, the bug still happens on chrome, when the user agent has bigger style sheets to apply. I have a partial snapshot of my current project in an independent git repo here https://anupamkhosla.github.io/materialbug/ Here you can see the same flickering in the dropdown tabs in latest chrome browser as well . If you delete the parallax img tag node from devtools, the flickering stops. You can download the repo and start stripping down its css, you will notice with lesser styles the bug becomes less evident and eventually disappears with even lesser css. When the body doesn't have a scrollbar, the bug becomes less prominent as well. If you just comment out the parallax initialization in the js file, the bugs stops happening as well.

[AnupamKhosla]

This library is unmaintained

Are you associated with the creators of this project? It has 38.6k stars, and it is one of the major css frameworks out there like bootstrap or bulma. I've noticed they've got version 1.1 as a fork going on, but that is alpha version. So this repo is the major production version out there.

[jshster]

Anupam, no he isn't. He's promoting his own new framework. The fork of this project works just fine. I'm using it in almost half a dozen projects already.

[AnupamKhosla]

Anupam, no he isn't. He's promoting his own new framework. The fork of this project works just fine. I'm using it in almost half a dozen projects already.

Thanks for the clarification mate. I think it's highly likely that the bugs I am facing in this branch would also occur in that fork as well. I tried to update my jsfiddle with that new branch's(v1-dev) js and css files, but it breaks the whole layout. Seems like v1-dev uses different css classes. It's too much mucking around to publish the bug in that branch.

So, for the time being, I leave this post as it is.

[jshster]

Hey Anupam, just looking at your jsfiddle right now. Interesting case study. To me the issue appears to be not so much a bug but more so the order in which things are done - and your use of tabs. What I see on Chrome is that when I click from Popular Locations (the wider drop down) to Rent a Office, the drop down items for Rent a Office are displayed BEFORE the width is recalculated. When I hover over Rent a Office, Popular Locations notice that the list item (or tab) doesn't have a 100% width? I think if you were to add the class s12 to each tab you will find the flickering will stop. The problem right now is because the library uses floats to position the columns when the narrower tab is displayed - and because the test content you have is so tiny (eg. the word "test") it briefly displays the content to the right of the "left floated" tabs. I wonder if you've considered using collapsibles?

[AnupamKhosla]

@jshster Thanks for your reply.

100% width or s12 or even flex won't solve the issue completely, because the dropdown has inline height given. So, when the content height increase, the dropdown gets a scrollbar.

I think it is still some sort of bug, because of the following reasons:

1. In my Google Chrome Version 93.0.4577.82 (Official Build) (64-bit) https://jsfiddle.net/51zm7ef8/1/ doesn't show any scrollbar flickering, meaning the time delay between calling dropdown("recalculateDimensions") and the actual new width and height styles being applied to the dropdown is none. But in Firefox or Edge there is a delay between calling dropdown("recalculateDimensions") and the actual new width and height styles being applied to the dropdown.

2. Consider another demo https://jsfiddle.net/p2h4cgaf/ dropdown("recalculateDimensions") doesn't recalculate the height when you toggle between the tabs. Now, if you click on the active tab again it recalculates the height. Strange behaviour. All in all it's got something to do with css repaints and dom's inbuilt delay in browsers of applying element.styles through javascript. May be tabs are toggling display:none and display:block and between that toggle is when recalculateDimensions does it's thing, or something along the lines.

I haven't tried collapsible, because I'll have to modify them to not change their height on show and act like tabs. I suspect I might run into similar bugs in that as well. In my opinion tabs inside a dropdown is a common thing for websites and the framework should work smoothly for that.

Finally, I did make a temporary workaround in my actual project and got away https://anupamkhosla.github.io/realestate/ I just used overflow hidden for a infinitesimal time when the flicker of scrollbar happens.

[LoganTann]

Hi @AnupamKhosla thanks for taking your time, I'm a collaborator of the community fork. This repo don't seems maintained by the author anymore.

First, regarding how we're sorting bugs and PRs, the alpha version should be 100% backward compatible with the original. If not, there is a problem and you may need to create an issue in the community repo.

Finally, I think I've seen similar issues in the fork. I highly recommend you to post your issue there, so a more active community can focus on your report.