As you can see the “Suggested” is overlapping with other text at the bottom of a detail page such as: Have you tried exploring URLs as part of your testing? - #3 by steve.green
Using Chrome (latest)
1 Like
I’m also noticing that the vertical alignment of the columns on the right is not great. So glad I no longer do web testing
1 Like
I am not seeing either the overlapping text or the vertical misalignment of the text in the right-hand column. Your screenshot shows that the text in the second and third columns on the right is smaller than the first column, but I am not seeing this either. The page looks fine to me. How have you enabled dark mode?
Are you sure you haven’t got some browser extension installed that’s causing this? I once had some weird background colours and flashing borders on a supermarket website, and it turned out to be caused by a browser extension that used some of the same class names as the website. I wasn’t even using the extension - just being installed was sufficient.
Ironically, the extension was made by a software testing company, and they admitted they should have used class names that are more likely to be unique.
It’s Chrome flags, it’s built into Chrome because I can’t stand the amount of white flashy pages which just changes the colors of white to black etc. So it would be weird that it changes the UI.
But I just tried to open it in a non darktheme window and it idd causes it it seems.
While looking into this I noticed that Chrome has removed the “Automatic dark mode” option that used to be available in Dev Tools. I suspect that this is what you are enabling using flags. I thought it was horrible because it was Chrome’s guess at what dark mode should look like - it wasn’t controlled by the author.
I just did some more checking and it turns out it’s nothing to do with dark mode. It’s a fault with the CSS media queries that occurs when the window width is exactly 640 CSS pixels wide. This equates to 300% zoom in a 1920px wide browser window, but it can be achieved using other combinations of zoom level and window width. The display scaling factor is also probably a factor - mine is 100%, but it’s often higher on laptops.
When the window is 640 CSS pixels wide, some media queries are applied, one of which adds “position:absolute” to the <ul> element containing the Suggested and Related buttons. This looks a lot like an “off by one” error in the media query. If you turn off this CSS rule, the text displays correctly and is no longer overlaid.
The vertical misalignment and incorrect font size are caused by other CSS rules that are applied at that window width.
1 Like