Beta 3 - Safari issue when adding/removing browser tabs

Beta
#1

This has been driving me nuts because I hadn’t noticed what I was doing to cause it, but I just figured it out.

Repro:

  1. Open a brand new window in Safari (with no extra tabs open)
  2. Load the builder of any page
  3. Open a new browser tab in that same window
  4. Switch back to the tab with the Pro builder in it
  5. Look down at the save button at the bottom of the bar

You can see here that only the very top of the save button is visible.
image

You can repro the reverse of this by starting with multiple tabs open in a browser window, then closing all tabs BUT the Pro builder. In which case you’ll get an extra grey bar at the bottom.

image

In both cases, simply resizing the window will cause everything to snap back into place.

This seems to be an issue on Safari because Apple adds a tab bar to the window only when you open tabs, whereas Chrome and Firefox always have tab bars visible at the top. The previous Pro builder does not have this issue, so I imagine it’s a change in how the dimensions of the screen size are being calculated in the new builder?

1 Like
#2

Here’s a video showing it in action. In it, I just click on the preview button to load it in a new tab, and you can see the save button get cut off. Then, just resizing the window causes it to snap back.

1 Like
#3

Thanks! Will confirm here once we’ve checked it out.

#4

Alas, once again Safari thwarts my desire to write cleaner CSS, haha.

The issue had to do with the fact that to maintain our app interface at the whole height of the screen, I was using 100vh on our .tco element, which is technically the “start” of the app markup. However, it’s also wrapped in #tco-root (just for React to have a mounting point) and then there’s body and html around that.

Using 100vh directly on .tco allowed me to simply specify the styles there and not have to pass height: 100%; down the entire chain. It works in all browsers, but because of the way that Safari adds their tabs to their own app, it changes the height of the window when they come in and out. See the following screenshots from Dribbble, the first one shows Safari with no tabs, the second one shows it with a second tab open, which cuts into the window (notice how the graphics at the bottom of the screen are cut off more):

no-tabs
no-tabs2880×1754 270 KB

has-tabs
has-tabs2880×1754 268 KB

You wouldn’t really notice / care about this on a typical website like Dribbble where it’s meant to scroll, but for a fullscreen app interface, you notice it more (especially when the bar is in a side position). Other browsers don’t seem to have this issue as they have a more permanent spot for tabs. I’m not sure the exact nuance of why passing height: 100%; all the way down the tree and using that for the height value on .tco is any different than just using 100vh (I would imagine they should behave the same), but for now that seems to be the only solution here.

1 Like