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?
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.
