0

I have an image with [inlineSVG]. When I navigate to the page, it appears for few seconds then disappear.

.html file of my component:

<ion-card class="card">
   <div class="card-image" [inlineSVG]="'./assets/img/image.svg'"></div>
     <ion-card-content class="detail-container">
        <ion-label><b>Share</b></ion-label>
        <ion-label>Share to the world</ion-label
>
    </ion-card-content>
</ion-card>

css of image is:

.card-image {
   margin: 20px 4vw 0px 4vw;
   height: 101px;
   width: 90%;
}

I do not find any clue why it is happening. If you know then please share it with me. Thanks a lot

leo giovanni
  • 61
  • 2
  • 8
  • Could you add more details like does it disappears due to CSS(display: none) or it disappears from the HTML? Try inspecting the element in the browser. – Sujit Kumar Singh Sep 25 '20 at 14:40
  • @SujitKumarSingh it disappear from html, it takes space but vanishes away – leo giovanni Sep 25 '20 at 15:38
  • Try wrapping the SVG element with another element as mentioned here - https://stackoverflow.com/questions/36407096/inline-svg-disappears-in-iosand-safari-when-a-css-filter-is-applied/36448122. Sorry, I don't have an Ionic project setuped at this point. – Sujit Kumar Singh Sep 25 '20 at 17:56
  • I'm facing the same issue. Did you found any solution yet? – Mayank Kataria Apr 08 '21 at 10:47

0 Answers0