apsect-ratio causing issues on old devices

[MikhaD]

The aspect ratio property is causing issues on old devices where it is not supported, see img

[JasonLovesDoggo]

It also happens on newer devices with odd aspect ratios.

Or if the page was zoomed out a lot.

[MikhaD]

What do you mean with odd aspect ratio? This issue is here because of the limited support for the aspect-ratio CSS property which is not supported on older versions of certain browsers.

Could you give an example of what you mean?

[JasonLovesDoggo]

problem causes include:
Smaller resolutions
Extreme resolutions e.g. a much higher width then height and vice versa
And it becomes more extreme the lower the total resolution

( Tested on Chrome version 98.0.4758.102)

[MikhaD]

Could you provide screenshots of the issues?

[JasonLovesDoggo]

Hey, sorry for the late response I was unavailable at the time

Images:
https://i.imgur.com/SGcp5YD.png
https://i.imgur.com/hULvvqW.png
https://i.imgur.com/TiJQidN.png

Not really that big of a problem as I don't know many devices that have aspect ratios like what's needed to replicate this bug
Also, I noticed that the answer boxes only scale when vertical changes happen not horizontal which leads to clipping

[MikhaD]

Potentially fixable with margin-top aspect ratio hack and @supports(aspect-ratio: 1)

[JasonLovesDoggo]

Also are you working on a fix for #48

[MikhaD]

Also are you working on a fix for #48

Unfortunately I don't have any apple devices, so I'm not sure how to debug #48 . I was kind of hoping that fixing this would fix that too. If you have any idea what is causing that it would be much appreciated.

[JasonLovesDoggo]

I have the exact same problem because I can't debug it either.
I believe it was caused by an iOS update
And possibility something to do with css grid

[JasonLovesDoggo]

That looks fine on my end

[JasonLovesDoggo]

Edit: here’s a front end resolution tool that shows the problem using the iPad Pro:

https://screenfly.org/#u=https%3A//mikhad.github.io/wordle/%23daily&w=1366&h=1024&a=22

Enter a word, problem is replicable. Very easy to debug from there. Cheers.

It works perfectly fine for me

[lukeswitz]

Grid gap set to 5 in the row and 5.5 in board. Solves issue on Apple devices with larger resolutions; Tested MBP 13,14,15" Monterey & iPad Pro iOS 15.5, addresses #48 & #49.

[MikhaD]

consolidated into issue #61