Scrunched header logo

Beaver Themer
1

WP 6.7, BB 2.8.4.4 BTh 1.4.11.2

Not sure when this started.

When header is set to stick and reduce, I’m getting the same behavior on several sites. Happening on both Mac and Windows on most browsers (except Safari on Mac on which it’s fine).

The problem is that the image (logo) that I have in the header (note that I’ve tried both the BB image module and the UABB one with same results) looks SCRUNCHED. Then, when I scroll, it pops to the proper width and then when it gets stuck to the top and reduced, it’s fine. So the problem is only when you are in normal, first time open mode.

Again, several different sites with different logos.

Thoughts?

ht scrunched up
ht scrunched up1872×594 81.6 KB

ht normal on safari
ht normal on safari2172×362 63.9 KB

2

Note that I tried to set the width to 100% !important in the CSS of the image and the result is that when you scroll and stick, of course, it stays 100% and does not reduce.

3

Update. I did try to add some CSS but now I have another issue. I added the CSS below and now the logo, just on chrome based browsers, is ‘tiny’ until I scroll. Then it comes back to size. Bizarre.

.fl-photo-img {
	width: 100%;
	height: auto;
	object-fit: contain;
}
4

Fixed it with the CSS below. Now the question is, shouldn’t this be fixed within BB?

.fl-builder-content[data-shrink="1"] img.fl-photo-img {
	width: 100%;
	height: auto;
	object-fit: contain;
}
5

Wrong! Works on some of my sites, not all. WTH am I missing??

6

Its actually a new wp 6.7 feature I’ll be looking into the issue Monday to see what if anything we can do.
https://core.trac.wordpress.org/ticket/61847

1 Like
7

I had the same problem - in google chrome only. My logo is displayed as a photo. So I went Photo > Style > Fill container > Contain

That fixed it but did bring through a few minor alignment issues. Nightmare!

8

Does anyone have a live site with this issue still happening so we can try and figure out whats going on?

9

Hi. I do. A few.

I have more if you need.

10

I just need to know what setting is causing it, adding your image to a shrink header works for me so I have not discovered what you have set that breaks it.

What image size do you have selected?
What photo module options are you using?
Perhaps something is set in the row?
What are the header settings?

11

Scratch that, got the issue now lol

1 Like
12

Quick fix to disable WP lazy load for the header for now while we think of a better fix

add_action( 'fl_theme_builder_before_render_header', function() {
	add_filter( 'wp_lazy_loading_enabled', 'disable_lazy_for_header' );
});

add_action( 'fl_theme_builder_after_render_header', function() {
	remove_filter( 'wp_lazy_loading_enabled', 'disable_lazy_for_header' );
});

function disable_lazy_for_header() {
	return false;
}
1 Like
13

Thanks; sorry for the newb question, where do we insert this?

14

Never mind, I figured it out. I just created a snippet. Looking forward to the final fix. Thanks.

15 
add_filter( 'fl_builder_photo_attributes', function( $attrs ) {
	return 'loading="false" ' . $attrs;
});
16

Does this one replace the previous one?

17

Well weve heard of issues with photo module in other places too, including uabb etc. So This disables lazyloading for the photo module

18

Looks like WP have pushed a css fix, annoyingly this css will be in the HEAD of every WP site lol… hax

img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }

20

Implementing your code to disable lazy loading of the header resolved that issue on my site. Thank you for giving us a band-aid for now! Is this something that Beaver Builder will address in an upcoming update, or is this something Wordpress will need to fix?