Wrong CSS display value after resizing (sfsmallscreen)

I have run across this issue and have found a solution. I've updated the title to make this more discoverable and to avoid confusion with Drupal's display modes.

In my case, a desktop menu was laid out with display: flex. When converting to the smallscreen accordion menu, this gets changed to display: block. When converting back, display: block was added to the inline style, overriding the stylesheet and ruining the menu's layout.

sfsmallscreen.js uses jQuery hide() to when it originally converts a menu, and jQuery show() to switch it back to the desktop menu style. Though jQuery's documentation for show() says "the display property is restored to whatever it was initially", in practice, how well it does this for values like flex and inline-block is dependent on the version of jQuery (I'm not sure of the version details - none of the options in the jQuery update module worked out for me).

Frequently the solution is to use jQuery's .addClass() and .removeClass() to show or hide an element to get around this problem.

My solution is to scrap jQuery show() in the sfsmallscreen's turnback() function. Instead, remove the CSS display property from the inline style entirely, and fall back on the stylesheet to determine the value for the display property.

I'm attaching the patch here in case anyone wants it, but will also make a pull request on GitHub for the Superfish-for-Drupal project.

I had the exact same issue!

Since this is not merged into the 1.x branch of Superfish-for-Drupal, I fixed it with the following CSS:

.sf-accordion.sf-expanded {
  display: block !important;
}