Background image in empty column without a calculated height in Avada 7.7.1

[moemio]

#882234

In a test site deploying PHP 7.4 WordPress 5.9.3 and Avada 7.3.1 a background image within in an empty full width column will be provided these css classes:
fusion-column-wrapper
fusion-flex-column-wrapper-legacy

as well as these data attributes in example:
data-bg-height=”1416″
data-bg-width=”2480″

And consequently the background image in the empty column will be provided with this inline min-height value ‘min-height: 827.903px’ which probably is calculated by either fusion-column.js or fusion-column-bg-image.js

At the production site utilizing PHP 8 WordPress 6 and Avada 7.7.1 no data-bg-height and data-bg-width properties are to be found and no min-height is calculated for the same background image. Instead the div containing the background image is provided two extra css classes:
fusion-column-wrapper
fusion-flex-column-wrapper-legacy
fusion-empty-column-bg-image
fusion-empty-dims-bg-image
And a img tag with this css class ‘fusion-empty-dims-img-placeholder’ containing this src ‘data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==’ is added as well.

No error messages are to be found in the developer bar. My question is whether this change in rendering of a background image in an empty full width column is to be expected or not?
I consider it to be a problem that recommended updates to your WordPress website makes it render the pages, deploying background images in empty columns differently and thus breaking the site layout.

Test site inline styling:
<div class=”fusion-column-wrapper fusion-flex-column-wrapper-legacy” style=”background-image: url("https://www.moe.dk/wp-content/uploads/2021/10/GLADSAXE_SKOeJTEHAL_faerre-sider-1.jpg&quot;); background-position: center bottom; background-repeat: no-repeat; background-size: cover; padding: 0px; min-height: 827.903px;” data-bg-url=”https://www.moe.dk/wp-content/uploads/2021/10/GLADSAXE_SKOeJTEHAL_faerre-sider-1.jpg&#8221; data-bg-height=”1416″ data-bg-width=”2480″><div class=”fusion-clearfix”></div></div>

Production site inline styling:
<div class=”fusion-column-wrapper fusion-flex-column-wrapper-legacy fusion-empty-column-bg-image fusion-empty-dims-bg-image gradient_gray” style=”background-image: url(‘https://www.moe.dk/wp-content/uploads/2021/10/GLADSAXE_SKOeJTEHAL_faerre-sider-1.jpg&#8217;);background-position:center bottom;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;padding: 0px 0px 0px 0px;” data-bg-url=”https://www.moe.dk/wp-content/uploads/2021/10/GLADSAXE_SKOeJTEHAL_faerre-sider-1.jpg”&gt;<div class=”fusion-clearfix”></div></div>

[Author]

Posts