I’ve noticed some strange behavior regarding the height of the header… Sometimes it looks fine, with the logo image displaying correctly. Upon refresh, however, the header often gets stretched vertically, appearing distorted. I’ve noticed the same behavior on the BB website as well.
You can see a screenshot here. The blue logo should be square, not rectangular.
I use Safari primarily. I’ve not noticed the issue in other browsers, but I’ve not tested exhaustively…
That sounds like caching as we haven’t experienced that yet on our end. Have you tried clearing your cache by chance? On your particular site, do you have a caching plugin installed?
I did clear my cache, but to no avail I’m afraid. As I type, I’m seeing the same issue on the BB site – your logo is stretched-out vertically. See my screenshot here.
The weird thing about this is that the problem intermittent. Sometimes the logo looks fine, but upon refresh or clicking to another page, there it is again – all stretched-out.
Very weird, David. I wish there was some way for us to troubleshoot this, but if we’re not seeing the issue on our end, there just isn’t a way to test if you know what I mean. Thanks for bringing it to our attention though, we’ll certainly keep an eye on it.
Vexing. Well, thanks for taking a look anyway. I was able to fix the issue by defining the max-height of the logo to the height of the image file itself:
img.fl-logo-img {max-height: 50px!important;}
It seems to work, in case anyone else is having this problem.
I’ve seen this occasionally as well on my sites using BB Theme and Plugin. Usually a page refresh fixes it. I’ve also seen it once or twice on “wpbeaverbuilder.com” site.
I think I can confirm that this is Safari only… I amended my CSS fix to apply just to Safari, and I’m not seeing the stretching in any Mac browser (I haven’t tested yet in IE)
@media screen and (-webkit-min-device-pixel-ratio:0) {
::i-block-chrome, img.fl-logo-img {max-height: 50px!important;}
}
I wonder if it can be narrowed down to Mac’s and retina as I’ve got the issue with Chrome but I’m running it on Mac OS X Yosemite and It’s only doing it on the retina logo, remove that and the other logo works fine.
Well I’ll be darned… I went back and tested again, and I am seeing it in Chrome after all. This means it’s likely particular to WebKit – the rendering engine that Safari and Chrome both share. To target WebKit (Safari & Chrome), remove the first CSS selector from the code I posted above:
@media screen and (-webkit-min-device-pixel-ratio:0) {
img.fl-logo-img {max-height: 50px!important;}
}
Maybe retina displays are involved as well… More testing would be in order. Let’s keep these reports coming! The more voices involved, the more likely we’ll get an official fix
I believe I’ve got a fix but this one is hard to test as it’s an intermittent issue. If someone is willing to send temporary admin access, I can patch your site to see if the fix works. Let me know!
Would you mind sending me temporary admin access so I can apply the patch for this on your site? I believe I figured it out but the issue is so intermittent that it’s hard to test. Let me know!
