79764347

Date: 2025-09-14 14:06:35
Score: 0.5
Natty:
Report link

However, the viewable area of the viewport just does not look square as it should for an aspect ratio of 1.008230.

This is likely not a problem with JS or with Chrome, and is just a simple quirk with the way that our eyes perceive things.

Mini glossary:
"white box" = the viewport
"top browser ribbon" = the top part of a browser where you can access a website's URL and any open tabs

1. The browser window (as a whole) isn't square

When you are looking at the open tab's content and trying to figure out if the white box looks square, your mind is most likely including the top ribbon of the browser inside of that calculation due to how the browser window contrasts to your desktop, causing your eyes to think that the white box isn't square, instead of your eyes thinking that the whole browser window with the top ribbon isn't square.
If you try replicating the same experiment with a blank blue square div inside the body, the blue square will appear square to your eyes due to the contrast from the blank body.

2. The sizing and positioning of the text is confusing (for your eyes)

Even if you removed the top browser ribbon from your experiment somehow, it could still appear non-square due to the confusingly-positioned text.
Since the text is short and wide and contrasting, it causes your eyes to draw an imaginary box around the text which your eyes don't perceive as part of the white box. Then, when your eyes exclude the imaginary box during the white box measuring, your eyes naturally only measure the space directly surrounding the imaginary box. This means that your eyes measure the space above and below the imaginary box, take that as the white box's height, and then your eyes measure the space to the left and to the right of the imaginary box, and then take that as the white box's width.

The image below should make what I just described more clear:
diagram explaining how our eyes perceive the width and height of the white box
As you can see, the yellow box is the imaginary box that your eyes form, and then the arrows are how your eyes instinctively calculate the dimensions without the imaginary box.
Adding the lengths of the green arrows will get you a shorter length than the sum of the lengths of the cyan arrows, therefore your eyes naturally perceive the width to be less then the height.

Reasons:
  • Long answer (-1):
  • No code block (0.5):
  • Low reputation (1):
Posted by: percenterror