I'm currently working on a bootstrap and angular project. I've noticed that in Safari, the card heights are not behaving as expected compared to other browsers like Firefox, Chrome, and Edge. I have tried setting the height to 100%, but it seems to only be an issue in Safari. Can anyone provide some guidance or assistance?
Code
parent:
home-page.html
<div class="position-relative padding-top-2rem card-container">
<div class="container">
<!-- title -->
<h4 class="text-align-center boldLucas">
{{'product-page.title.useTheMostInnovativeOSWithNetworkConnectivity' | translate}}
</h4>
<!-- cards -->
<div class="row row-cols-sm-1 row-cols-md-2 row-cols-xl-{{cardElements.length}} g-3 py-5">
<app-card-content *ngFor="let cardElement of cardElements" [cardElement]="cardElement"></app-card-content>
</div>
</div>
</div>
home-page.css
.card-container {
background-color: #0A0D2F !important;
}
child:
card-component.html
<div class="col card-box-schaddow" id="card-box-schaddow-{{cardElement.icon}}">
<a role="button" class="card btn" [href]="'#'+cardElement.id">
<div class="card-body">
<img class="row-box-icon"
src="../../../assets/fonts/icons/{{cardElement.icon}}.svg"
alt="Icon not found"/>
<h4 class="bold card-title text-align-center">
{{cardElement.title | translate}}<span class="bi-chevron-right bold"></span>
</h4>
<p class="card-text text-align-center py-2" [innerHtml]="cardElement.text | translate"></p>
</div>
</a>
</div>
card-component.css
/* classes */
.row-box-icon {
width: auto;
margin-bottom: 5%;
}
.card, .card:hover {
height: 100% !important;
border-radius: 9px;
background-color: rgba(14, 44, 103, 0.3);
border: 1px solid rgba(255, 255, 255, 0.5);
}
.card-box-schaddow {
border-radius: 50%;
}
.card-text {
font-size: 1rem;
}
.card-title {
padding-top: 1rem;
}
chrome, firefox, edge: enter image description here
safari: enter image description here
I tried:
.card, .card:hover {
height: 100% !important;
// ...
}
.card, .card:hover {
min-height: 100% !important;
// ...
}
.card, .card:hover {
height: 100% !important;
min-height: 100% !important;
// ...
}
but so far, I have been unable to find a solution. Any suggestions would be greatly appreciated.