QDialog with z-index not working in Iphone

[Sheejavarghese6]

I have created a q-dialog componet with z-index :-1 . It is working in Safari, Chrome and android perfectly. Start button should positioned top of dialog. Anyone has any idea?

[metalsadman]

Plugin? If not try wrapping the content in a qcard.

[Sheejavarghese6]

Dialog Component

<template>
  <div class="infoPopUp">
    <q-dialog
      v-model="introDataTraining.showInfo"
      persistent
      transition-show="fade"
      transition-hide="fade"
      position="bottom"
      v-if="introDataTraining.currentStep != -1"
    >
      <div :class="positionPopup">
        <div class="row">
          <div class="col-3">
            <img src="../../statics/maskottNew.png" class="choice-popup__img" />
          </div>
          <div class="col-9">
            <div class="choice-popup__bubble">
              <p class="choice-popup__text text-body3">
                <span v-html="getText"></span>
              </p>
            </div>
          </div>
        </div>
        <div v-if="showOkButton" class="choice-popup__btn-row">
          <div @click="nextStep()" class="btn--pos-white choice-popup__btn--1">{{ continueText }}</div>
        </div>
      </div>
    </q-dialog>
  </div>
</template>

[Sheejavarghese6]

@metalsadman Please find the below code

[metalsadman]

@Sheejavarghese6 and what does positionPopup do? Don’t have iOS, but I think best put a reproduction codepen, fork the codepen from docs at tools menu, and reproduce it there so peeps can check, ty.

[Sheejavarghese6]

@metalsadman I positioned the overlay class like this
.infoPopUp {
z-index: 5000;
position:relative;
}

[Sheejavarghese6]

@metalsadman .info-click {
z-index: 6001;
position: relative;
} fOR START BUTTON LIKE THIS

[Sheejavarghese6]

@metalsadman https://codepen.io/svarghese/pen/VwaJWGo

[Sheejavarghese6]

@metalsadman It works with chrome, android and also in safari browser. I am getting this issue only in Iphone

[metalsadman]

@Sheejavarghese6 https://codepen.io/rstoenescu/pen/VgQbdx fork this codepen. but yeah try my suggestion first, wrapping the main content in a QCard as QDialog has a transparent background by default.