I have a Vue component that contains an IFrame. The component make API calls, using a Vuex store, to get information for an SSO that will be loaded in the IFrame. The first time the component mounts, it loads in the IFrame perfectly. But when I switch screens and the component mounts again, the SSO loads in a new tab. Then, if I go to another screen, it loads fine again. So the new tab issue only happens every other time the component mounts.

It should be noted that this behavior only appears in Safari. Works as expects everywhere else.

My code is pretty similar to this. Had to modify for proprietary reasons.

    <template>
  <div>
  <form
    :action="endPoint"
    target="the_iframe"
    ref="ssoForm"
    method="POST"
    name="ssoForm"
    id="ssoForm"
  >
    <input
      id="AuthCode"
      type="hidden"
      name="AuthCode"
      :value="authorizationCode"
    />
    <input
      id="AuthAppUrl"
      type="hidden"
      name="AuthAppUrl"
      :value="authAppUrl"
    /> 
    
  </form>
  <iframe
      width="100%"
      name="the_iframe"
      height="300"
      style="display: flex"
      id="the_iframe"
      frameborder="0"
    ></iframe>
  </div> 
</template>

<script>
import types from "path/to/types"
export default {
  data() {
    return {
      endPoint: null,
      authorizationCode: null,
      authAppUrl: null,
      errorStatus: false,
      error: null
    }
  },
  methods: {
    async getSSOModel() {
      try {
        var data = await this.$store.dispatch(
          `store/${types.GET_SSO_MODEL}`
        )
        this.endPoint = data.endPoint
        this.authorizationCode = data.authorizationCode
        this.authAppUrl = data.authAppUrl 
        await this.$nextTick()
        this.$refs.ssoForm.submit()
      } catch (error) { 
        this.error = error
        this.errorStatus = true
      }
    }
  },
  async mounted() {
    await this.getSSOModel()
  }
}
</script>