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

Use crispEdges rendering for octicon-internal-repo #11801

Merged
merged 3 commits into from
Jun 9, 2020

Conversation

CirnoT
Copy link
Contributor

@CirnoT CirnoT commented Jun 8, 2020

Came up in #11771 (comment)

Applied only to this specific octicon so that it doesn't interfere with others - that octicon is kinda special in a way that it's 13px, unlike others that are 10px, 12px or 14px.

@CirnoT
Copy link
Contributor Author

CirnoT commented Jun 8, 2020

CI failure unrelated

@GiteaBot GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Jun 8, 2020
@GiteaBot GiteaBot added lgtm/need 1 This PR needs approval from one additional maintainer to be merged. and removed lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. labels Jun 8, 2020
@silverwind
Copy link
Member

So your theory is that this brower bug only triggers on odd widths only?

@CirnoT
Copy link
Contributor Author

CirnoT commented Jun 8, 2020

Most likely with combination of font size/line height or specific positioning and size; for example I can not reproduce the issue on 32px for example. It's less visible on 24px but still can be noticed if two were stacked near each other.

@CirnoT
Copy link
Contributor Author

CirnoT commented Jun 8, 2020

Interestingly can reproduce it on 30px but it's crisp on 32px (which is exactly double of 16px which is also broken)

firefox_2020-06-08_15-11-51
firefox_2020-06-08_15-12-11

Might have to do something with this particular SVG, I don't know. This icon was added late in octicon lifecycle and looking at some issues on GitHub they might not even have original files for it.

It's very possible that like in original Firefox issue, it's not about odd width but sub-pixel anti-aliasing and it just so happens that this icon is made in some unique way that causes it to manifest on certain resolutions.

@CirnoT
Copy link
Contributor Author

CirnoT commented Jun 8, 2020

Just noticed that it's blurry on 32px but only when zoomed; except for multipliers of 100% such as 200% or 300% - on those it's crisp.

@silverwind
Copy link
Member

Any drawback to using crispEdges on all SVG icons?

@CirnoT
Copy link
Contributor Author

CirnoT commented Jun 8, 2020

In the end adding this CSS rule for this icon only seems like a good compromise to me; it works in all cases I tested and doesn't affect anything else. We'll be able to remove it whenever we switch to new octicons (once they're out officially) or when we get to parsing octicon JSON (whichever is first I suppose).

@silverwind
Copy link
Member

silverwind commented Jun 8, 2020

Oh, and does geometricPrecision have any effect on your issue? I remember using that once. crispEdges may turn off anti-aliasing so might look bad in some cases.

@CirnoT
Copy link
Contributor Author

CirnoT commented Jun 8, 2020

Any drawback to using crispEdges on all SVG icons?

Jagged edges on icons such as notification bell; generally I don't think it's recommended to use it on all icons; it's a workaround.

firefox_2020-06-08_15-30-56

@CirnoT
Copy link
Contributor Author

CirnoT commented Jun 8, 2020

Oh, and does geometricPrecision have any effect on your issue?

No, but I believe disabling anti-aliasing is what actually fixes it for this icon and it doesn't has any large rounded shapes so it's fine either way.

@GiteaBot GiteaBot added lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. and removed lgtm/need 1 This PR needs approval from one additional maintainer to be merged. labels Jun 8, 2020
@techknowlogick techknowlogick added the topic/ui Change the appearance of the Gitea UI label Jun 8, 2020
@techknowlogick techknowlogick added this to the 1.13.0 milestone Jun 8, 2020
@techknowlogick techknowlogick merged commit 777015c into go-gitea:master Jun 9, 2020
@CirnoT CirnoT deleted the crisp-internal_octicon branch June 9, 2020 07:27
ydelafollye pushed a commit to ydelafollye/gitea that referenced this pull request Jul 31, 2020
* Use crispEdges rendering for octicon-internal-repo

* Update _svg.less

Co-authored-by: techknowlogick <techknowlogick@gitea.io>
@go-gitea go-gitea locked and limited conversation to collaborators Nov 24, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. topic/ui Change the appearance of the Gitea UI
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants