search

GunnWATT / watt

WATT: Web App of The Titans
https://gunnwatt.web.app
MIT License
25 stars 15 forks source link

Map image is low resolution on iPhone 8 #64

Open ky28059 opened 3 years ago

ky28059 commented 3 years ago

Also mentioned by @MysticalApple. Unsure why this happens; is it a PWA image optimization attempt by safari?

ky28059 commented 3 years ago

Odder still is that it's fine on my iPad, it only becomes low res on my phone. Perhaps its a very new iOS behavior?

ky28059 commented 3 years ago

^ Probably new behavior introduced in iOS 15; will look into this later.

ky28059 commented 3 years ago

Unlike the overscroll behavior, I cannot find anything on this online. Apparently Aaron's iPhone 12 running iOS 15.0 has the image at expected resolution, while Timon's iPhone 11 running iOS 14.7.1 doesn't. Seems like it isn't an iOS issue, unless it was fixed in 15.0 and readded in 15.1 (my iOS version).

ky28059 commented 3 years ago

Also present on @RaspberryPi69's iPhone 11 on iOS 14.8.

e3l commented 3 years ago

Had similar issues, but it was noticable on desktop too, so I'm not sure if the same fix will work. Nevertheless, check out https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering.

I would have tried this myself to see if I'm even right, but I don't have permissions to make a branch here and I'm a little lazy to fork right now :)

SheepTester commented 3 years ago

Does adding translateZ(0) help?

ky28059 commented 3 years ago

Had similar issues, but it was noticable on desktop too, so I'm not sure if the same fix will work. Nevertheless, check out https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering.

I would have tried this myself to see if I'm even right, but I don't have permissions to make a branch here and I'm a little lazy to fork right now :)

A little late, but could you say which browser and version you experienced the blurriness on? A fork isn't necessary when you can test with inspect element or (if it requires JS) cloning and running locally.

e3l commented 3 years ago

A little late, but could you say which browser and version you experienced the blurriness on? A fork isn't necessary when you can test with inspect element or (if it requires JS) cloning and running locally.

Apologies, I meant that I experienced something similar in a different project with a different image.

Unfortunately I cannot inspect element on my iPhone :(