Visibility Hidden Safari Bug

Question

I would like to use visibility along with translate to control which content to show to the user.

As the user tabs through the navigation, therefore, the content below is transitioned via translateX() to show the proper information. Then, the containers in the viewport are shown to the user using visibility: visible and the containers outside of the viewport are hidden using visibility: hidden.

The CSS content for both containers looks something like:

.visible {
  position: absolute;
  width: 100vw;
  transform: translateX(0px);
  visibility: visible;
}

.hidden {
  position: absolute;
  width: 100vw;
  transform: translateX(-100vw);
  visibility: hidden;
}

This works as expected in Chrome and Firefox, but for some reason in Safari these properties don't perform as expected and the browser scrolls horizontally. You can see this behavior yourself by testing using this link (scroll below the fold and toggle between the tabs to observe the behavior).

I did see this Stack Overflow question, but the solution does not seem to work for me in this instance. I would like to keep the structure of the site as is and am hoping that a workaround could solve for this Safari bug.