2

I'm working on a website based on Bootstrap 4, with a collapsing sidebar.

The toggle button is visible in chrome and firefox on windows and macos just fine. But it isn't visible in safari on macos.

I tried a lot of solutions like playing around with options e.g.:

-webkit-transform: translateZ(0px); or transform-style: preserve-3d;

without any luck.

I don't want to put too much code in here so I've made a codepen where you can see the actual behaviour: https://codepen.io/pen/JqRLKx

Any ideas on how I can solve this?

Tamir Klein
  • 3,514
  • 1
  • 20
  • 38
mm_bln
  • 21
  • 3
  • Welcome to StackOverflow! Have you tried this https://stackoverflow.com/questions/30313761/bootstrap-data-toggle-not-working-in-safari – Namig Ismayilov May 13 '19 at 14:48
  • Thank you for your answer. I tried the solution mentioned there with no luck. In my example the collapse of the sidebar is working as expected in all browsers only the toggle button isn't visible in safari at all. – mm_bln May 13 '19 at 19:06

2 Answers2

0

Alright I think I might have narrowed down your issue. I could repro what you had on Safari.

After a lot of deleting and seeing what line causes the issue I found that overflow-y: auto is causing the issues.

#sidebar-wrapper {
position: fixed;
left: 21rem;
width: 0;
height: 100%;
margin-left: -21rem;
overflow-y: auto;
background: #fafa;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;

}

Now removing that line will display dropdown items. I am not sure how you can solve that problem. I ll update my answer if I find a solution Give it a shot.

EDIT

try this JQuery slide toggle menu

Namig Ismayilov
  • 121
  • 17
  • Thanks for sharing. I can't figure out how i can adapt it to my needs. [link](https://codepen.io/pen/JqRLKx) Any suggestions? – mm_bln May 14 '19 at 00:27
0

On my Safari I've moved it to the right of the forward/backward arrows. I just added one flex space to the right of the sidebar icon, and the bug is gone.

Alticoo
  • 1
  • 1