search

utkwdn / utkwds

The University of Tennessee, Knoxville Web Design System
4 stars 0 forks source link

Mobile menu flickering in Safari #448

Open reasterbrooknc opened 1 month ago

reasterbrooknc commented 1 month ago

Describe the bug At 1155px - 1168px in Safari, the menu collapses to mobile but you can't keep it open—it flickers closed. Looks like mobile and desktop navs are competing?

Page URL csw.utk.edu, cci.utk.edu, onestop.utk.edu (reported that it doesn't happen on admissions.utk.edu)

WDS Theme Version 1.2.2

To Reproduce Steps to reproduce the behavior:

  1. Go to csw.utk.edu in Safari 17.5
  2. Adjust screen size to 1155-1168
  3. Open menu

Expected behavior Mobile menu should stay open in the righthand sidebar.

Desktop (please complete the following information):

WordPress Plugins Installed n/a

reasterbrooknc commented 1 month ago

@pikemurdy ready for your review. Reposting some of my earlier message about this:

Mike H. and Mike W. looked into the menu flickering bug that Anna reported, and they uncovered that this is actually a bug with the Bootstrap OffCanvas and Scrollbar modules. Mike W. filed an issue with them, since we saw the same bug on the Bootstrap site itself.

We also determined that the bug only happens in the following situations. A user is:

We developed a workaround in the theme by changing the Backdrop setting on OffCanvas, to enable body scrolling in the background only in Safari. It is a temporary fix and a tradeoff—we don’t like body scrolling as a UX/UI experience, but without this, the menu isn’t navigable in the scenario outlined above. So we think it’s worth it. We have it enabled in staging if you want to take a look—compare wds-stg to one of the live sites, recreating the conditions outlined above.

pikemurdy commented 1 month ago

This is good.