SevenTV
The logo 7tv uses for settings and emote menu's is blurry.
Describe the bug The logo 7tv uses for settings, and the emote picker, is blurry, due to it being scaled down from a 512x512 webp image
To Reproduce Steps to reproduce the behavior:
- Go to a twitch page, or a youtube live stream
- Look at the 7tv logo
- See that it is blurry
Expected behavior It should be a nice and not blurry 7tv logo
Screenshots
Version: Chromium 94.0.4606.61 SevenTV 2.0.2
As a solution, i have created a nice and pixel aligned svg version of the logo
<svg width="16" height="16" viewBox="0 0 4.233 4.233" xmlns="http://www.w3.org/2000/svg"><path style="fill:#0e0e10;fill-opacity:1;stroke:none;stroke-width:.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="m21.431 7.408-1.058 1.059-1.323-1.323V8.73l-.53-.529V6.35l1.588-1.058-2.645.264-.265-.529 4.233-.53v.53l-2.116 1.588 1.058 1.058 1.058-1.058z" transform="translate(-17.198 -4.498)"/></svg>
You are free to use it everywhere for the extension
(edit: it looks like this)
look at how sharp the edges are on the native website buttons compared to the 7tv button
Hmm, I can maybe see some blur on the images you linked. I dont have the same blur when its rendered for me tho. :thinking: What resolution is this?
(firefox)
(chromium)
The logo appears to be "blurry" due to how chrome downscales its images.
If you wanted to fix this (Would've made a PR but I messed up stuff with my fork and can't rn) you can add: image-rendering: -webkit-optimize-contrast; to the CSS of the logo.
Without image-rendering: -webkit-optimize-contrast;
With image-rendering: -webkit-optimize-contrast;
The edges appear less blurry and more defined
You could also just input an image the same size as it will be displayed so that there is no unwanted appearances with the downscaling (or use an svg)
i will attempt to pr this i guess
edit: for some reason it causes the image to become crushed
I do not think this is the right solution to this problem EDIT 2: APPARENTLY adding it manually makes it look smoother and more clear, but if it get's added by the extension itself it looks like the images above
https://user-images.githubusercontent.com/18615981/154973044-c87e19a0-598e-4be7-ac78-2abb4d171f35.mp4
???????????????????
EDIT 2: APPARENTLY adding it manually makes it look smoother and more clear, but if it gets added by the extension itself it looks like the images above
I can't seem to replicate the error when it's added through the extension, make sure the syntax is correct. Works fine for me on Version 98.0.4758.102 (Official Build) (64-bit) Google Chrome
Version 98.0.4758.102 (Official Build, ungoogled-chromium) (64-bit) the syntax is correct
I don't know why adding styles from an extension would behave any differently to it being edited in dev tools
So what are the plans for this issue, you just gonna close it? @AnatoleAM
one second, i'll see if it's fixed for me and then close it myself
Anatole said that the css wasn't really worth it, don't know if he wanted to implement an svg or just skim over this issue
why not?
https://github.com/SevenTV/SevenTV/pull/236#discussion_r850631177
seems like a prescaled or vector is fine, just not the css. I'll probably make a PR for that today unless someone else wants to do it
i see, in case anatoleam actually needs a proper vector version of the logo i can create it, had much more experience with that now so it won't be as bad as the one i linked prior in the issue
I a lot of the weird rendering is caused due to using the image as a mask instead of a scaled image. This was so that the colour could be changed without having different assets. A proper vector version would be optimal yea.
not sure if this would be the best way to share it but i have created an svg version of the logo https://drive.protonmail.com/urls/19GX8XY1BM#bPH1t3TsDPwv
i think it looks good scaled down too
just obviously need to recolor it, but it's an svg, extremely easy to do so
apparently the logo on the main page is already svg and i spent all this effort trying to recreate it, OMEGALULiguess