Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Map image is low resolution on iPhone 8 #64

Open
ky28059 opened this issue Oct 31, 2021 · 8 comments
Open

Map image is low resolution on iPhone 8 #64

ky28059 opened this issue Oct 31, 2021 · 8 comments
Labels
bug Something isn't working important Something that *really* needs to be fixed

Comments

@ky28059
Copy link
Member

ky28059 commented Oct 31, 2021

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

@ky28059
Copy link
Member Author

ky28059 commented Oct 31, 2021

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
Copy link
Member Author

ky28059 commented Oct 31, 2021

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

@ky28059
Copy link
Member Author

ky28059 commented Oct 31, 2021

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 ky28059 added bug Something isn't working important Something that *really* needs to be fixed labels Oct 31, 2021
@ky28059
Copy link
Member Author

ky28059 commented Oct 31, 2021

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

@e3l
Copy link

e3l commented Nov 1, 2021

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
Copy link
Collaborator

Does adding translateZ(0) help?

@ky28059
Copy link
Member Author

ky28059 commented Nov 11, 2021

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
Copy link

e3l commented Nov 11, 2021

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 :(

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working important Something that *really* needs to be fixed
Projects
None yet
Development

No branches or pull requests

3 participants