Render modal window component inside table on IOS

Hi
in my app i created a zoom component as ‘div’ where simple show an image on center with background black
My simple code works well on android or windows browser but on Ipad where i get the image showed inside table border (outside nothing).
My simple code of CartItemZoom.vue component

<template>
  <div class="zoom" @click="close">
    <img :src="`../../assets/foto/${imageName}`" >
  </div>
</template>

<script>
export default {
  name: "image-zoom",
  props: {
    imageName: String,
    codart: String
  },
  methods: {
    close() {
      this.$emit("close");
    }
  }
};
</script>

<style lang="scss" scoped>
.zoom {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 20000;
  
  display:flex;
  justify-content:center;
  align-items:center;
}

  img {
    display: block;
    height: 80%;
  }
</style>

The CartItem.vue component

<template>
  <tr>
    <td>
      {{item.Code}}
    </td>
    ...
    <transition name="fade" mode="out-in">
      <cart-item-zoom v-if="open" :imageName="imageName" :codart="codart" @close="open =false" />
    </transition>
  </tr>
</template>

The Cart.vue component page

<tbody>
    <cart-item v-for="(item, i) in paginatedCartItems" :key="i" :item="item"  @itemSelected="itemSelected"/>
</tbody>

I cant figured out what the problem is in Ipad (IOS more in general)
could someone suggest something?

position: fixed and background-attachment: fixed can cause problems on mobile devices. Older Android versions too. Maybe this is the problem.

But it would be helpful if you would provide two screenshots that are showing how it looks good and how it looks broken.

As i said it fill table …imagin you do not see table information…i not be able to do better but it suggest the problem

I think i must move the zoom.vue component in the cart.vue component
But i do not like that solution because i end with a cart.vue component too big
and i think the reusable idea of dry principle is lost completely
sorry for english

tks for reply

doesn’t have the cart-item-zoom component to be in a td block too? not sure.

But I can say that position fixed is not relative to it’s parent. It’s always relative to the whole window.

.zoom {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

Nothing Change… :frowning:

Then I’m sorry. I don’t get it.

Tks in any case… bye