Gray bar appearing in bottom of header image

Contributor

It's hard to say when this started, maybe two months ago, but page header images have a gray bar at the bottom of them.  If I un-maximize the browser window, it goes away or if I scroll down at all it shrinks away.  I only see it on my main monitor, not on my laptop monitor.  They both have a resolution of 1920x1080 but my main monitor's scale is set to 100% while my laptop is at 125%.  I'm using Chrome.

 

I've tried incognito mode, to eliminate browser extensions, tried Edge (though I know they're both Chromium-based) and had one other person confirm they experience it as well.  Is anyone else having this issue?

 

image002.png

3 Replies
Yes, I've been seeing it too - in multiple tenants and in both Chrome and Edge. Until I saw your post, I didn't realize that it wasn't there on my laptop screen! On my large monitor, the gray bar is there. If I drag the screen to my laptop, it isn't.

@Susan Hanley 

 

I did some research with developer tools and I can see that it's a CSS issue. I'm no expert with CSS, but I can see that there is a difference between the image and the <div> section, which contains the image (and title).  On my main monitor, when I maximize the browser window, there is a CSS "@media screen" property that goes from 228 pixels to 280 pixels.  For the image, the "element.style" CSS has a "height" property that does not change - it stays at 228 pixels.  The <div> doesn't have a height property, so it resizes to 280 pixels.  That's what's creating the gray bar.  I assume that the "@media screen" style is updated by the browser.  No clue why it changes when maximizing on certain screens.

 

I've opened a ticket with Microsoft with all this info, so maybe they'll make some kind of adjustment to the CSS.

 

Image Area.jpgImage CSS.jpgDiv CSS.jpg

Great detective work! I'm looking forward to what you learn!