wordle
wordle copied to clipboard
MikhaD
apsect-ratio causing issues on old devices
It also happens on newer devices with odd aspect ratios.
Or if the page was zoomed out a lot.
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?
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)
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
Potentially fixable with margin-top aspect ratio hack and @supports(aspect-ratio: 1)
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.
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
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
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.
