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.

Sign up for GitHub

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

Jump to bottom

Blurry tiles in Safari #1

Open
gdude2002 opened this issue Feb 25, 2020 · 5 comments
Open

Blurry tiles in Safari #1

gdude2002 opened this issue Feb 25, 2020 · 5 comments
Labels
bug Something isn't working help wanted Extra attention is needed

Comments

@gdude2002
Copy link
Contributor

gdude2002 commented Feb 25, 2020 •
edited
Loading

In Safari, at the higher zoom levels, tiles are blurry. They're blurry no matter what I try to do, for whatever reason.

image

It appears that Safari is basically ignoring the image-rendering CSS property. I don't own a Mac, and I can't afford the €920 price of Apple's cheapest Mac (the Mac Mini), so I don't have any way to fix this one.

This issue would be a great pull request candidate for anyone that owns a mac and can figure this problem out.

For reference, this is how it looks in Firefox, Chrome and Edge:
image
@gdude2002 gdude2002 added bug Something isn't working help wanted Extra attention is needed labels Feb 25, 2020
@gdude2002
Copy link
Contributor Author

gdude2002 commented Feb 25, 2020 •
edited
Loading

The relevant CSS is here: https://github.com/TeamJM/webmap-client/blob/3d7fe377dfd6fa40e1702c3b1785606e83fe87d3/src/main/css/index.css

@Akarys42
Copy link

I own an iPad, is there any way I can help?

@gdude2002
Copy link
Contributor Author

Unfortunately, this requires more than just testing - someone needs to actually attempt to fix this themselves, and I have no idea what to do that isn't messing with the image-rendering CSS property.

gdude2002 added a commit that referenced this issue May 4, 2020
@gdude2002
[#1] I was told to try this for the Safari issue.
2a7cb72
@gdude2002
Copy link
Contributor Author

Note to self from a chat on the Fabric discord
Screenshot_20201015-191253

@Snipeye
Copy link

Snipeye commented Jul 7, 2021 •
edited
Loading

I was testing some stuff on my own computer (I own a mac and am happy to test as needed) with the following:

<html>
<head>
<style>
#scale {
	transform: translateX(0px) translateY(0px) scale(16);
	transform: scale(16) translateX(0px) translateY(0px);
	transform: translate3d(0px, 0px, 0px) scale(16);
	transform: scale(16) translate3d(0px, 0px, 0px);
}
#myImg {
	image-rendering: pixelated;
}
</style>
<body>
<div id="scale">
	<img id="myImg" src="tile.png" style="width: 512px; height: 512px;" />
</div>
</body>
</html>

I found that the latter 2 transforms involving "translate3d" both made the image blurry, where the former 2 with separate "translateX" and "translateY" components did not. I recognize the use of translate3d is probably to get the GPU to do stuff rather than the CPU, but anything that induces the GPU (perspective(1px) as a transform instruction, for example) resulted in bluriness.

I tried to make edits in the inspector but couldn't get it to sharpen when I was trying - I think I missed something (and there MAY be a problem with position:absolute from what I was researching).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working help wanted Extra attention is needed
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@gdude2002 @Snipeye @Akarys42