Currently, I am developing a website where the layout of a section is structured as follows:
<div class="col-md-6">
<section class="right" data-type="background" data-speed="30" style="background: url(<?php echo get_field('book_image')['url']; ?>);">
</section>
</div>
In this scenario, the parent div has a height of 2976px in Safari. However, the child element does not adjust its size accordingly, even when the height property is applied to it.
I have tested this issue on Chrome and Safari on macOS: Chrome worked fine, but Safari did not perform as expected.
Is there a way to resolve this without utilizing JavaScript? Thank you :)
-- Update
The site is built using Bootstrap4, but the right class only includes styling properties for the div. See below
.right {
max-width: 50vw;
height: 100%;
background-size: 60vh !important;
background-repeat: no-repeat;
}
-- Update #2.
Below is a snippet showcasing the problem:
.left {
padding: 0;
background: #000; /*debugging*/
height: 200px; /*debugging*/
}
.right {
height: 100%;
background-size: 60vh !important;
background-repeat: no-repeat;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-6 left">
</div>
<div class="col-6">
<section class="right" data-type="background" data-speed="30" style="background: red;"></section>
</div>
</div>
</div>(or view on JSFiddle: Click here