Display of CSS Grid looks bad

[richb-hanover]

Description of the issue:
I was reading the page at https://eev.ee/media/2020-02-css/thumbnail-grids.html that demonstrated various ways to lay out a page. Its css-grid example (scroll down) was obviously incorrectly laid out - the grid overlaps the text. (See below)

The page looks fine in current versions of Firefox, Chrome, Safari on macOS Catalina.

How can this issue be reproduced?

1. Go to the URL above
2. View the “2017 Grid” entry at the bottom of the page

Expected result:
Grid shouldn’t overlap the text

Brave Version( check About Brave):
Version 1.2.43 Chromium: 79.0.3945.130 (Official Build) (64-bit)

Additional Information:

macOS Catalina 10.15.1

Please let me know if I can provide any further debugging information. Thanks!

[Aa-ron]

Hi @richb-hanover,

I believe this is an issue with the page itself/screen sizes and not Brave. When I open the page chrome the images also overlap the text. But zooming in and out resets the images to not overlap.

Below is an image from Chrome, here you can see the format is messed up.

Below is an image from Brave, here you can see it’s still messed up.

Here is another from Brave, but slightly zoomed out. The format is better.

[richb-hanover]

@Aa-ron

Here is another from Brave, but slightly zoomed out. The format is better.

Yes, I see the same thing if I hit Cmd-minus. And, strangely, it looks correct if I hit Cmd-+ to restore it back to its default size. Reloading the page gives the overlapped appearance again. And hitting Cmd-+ then Cmd-minus also restores the correct appearance.

I don’t need a fix here. I’m simply reporting this in case it’s a clue to bad behavior that’s bugging others. (My company works on the slogan, “We promise not to fix it if we don’t know it’s broke…”)

Thank you for the speedy response.