Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Uibar hidden but still displaying a black empty bar on Safari only

Hello everyone! Making my first Twine game using Sugarcube 2.0 on Twine 1.4.2 and it seems to have gone off without a hitch except for one final problem that I'm stumped on.

I've used
#ui-bar {

display: none;
margin: 0;


in the story's .css stylesheet to get rid of the UI, which is not a problem on Firefox or Chrome, but on Safari it is creating a big black space on the right side that's cutting off the images. If I click on the bar it disappears, but still, it looks pretty bad:

With the bar:


After you click on the screen to get rid of it (what the image should look like):


Has anyone else run into this or know a way to fix it? Or a way to completely get rid of the UI bar?

First post so apologies if I'm missing anything.


  • Turns out it had nothing to do with the UI bar, I had put a padding element that I forgot about in the main body that was only peeking out on Safari for some reason!
  • If you actually want to completely remove the UI bar, rather than simply hide it, then the proper way to do so is to remove both the UI bar and its stylesheet. You may do so with the following JavaScript snippet:
    In particular, its stylesheet patches some of the core styles to make room for it in the layout, so removing its stylesheet along with the UI bar itself is somewhat important.
  • Oh that's fantastic, I was actually hoping to get rid of it completely but thought the only option was to hide it, thank you!
Sign In or Register to comment.