Forum Discussion
Gray bar appearing in bottom of header image
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?
- 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.
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.
- Great detective work! I'm looking forward to what you learn!
- We have exactly the same issue here. Thanks for documenting it! We'd love to see it solved, and at least acknowledged by Microsoft as a "known bug".
