On high res screens (we're testing on 1920 x 1080) we're having an issue with uneven borders when border-width is 1px
Anything above 1px renders fine as you can see:
http://i.stack.imgur.com/19aiq.png
This is only happening on Chrome; I checked if there are any chrome settings that would fix it but no dice.
I'm currently trying to play with the html meta tags. Or maybe a setting on the computer itself is causing this?
If you've come across anything like this all help would be much appreciated!
Related
On Windows, and to a certain degree also on Mac OS, with different browsers (Firefox, Chrome, Safari), our menu bar has rather pixelated/blurry font-rendering. This is on an ASP.NET Core 2.1 site that uses Bootstrap 4.1.3 but it's easy enough to reproduce with just simple HTML: https://jsfiddle.net/2tgc9r84/
<html>
<body style="background-color:#e72c87;">
<p style="font-size:20pt;">
This is some text that looks terrible.
</p>
</body>
</html>
Interestingly, the same font renders just fine in other areas of the site. I have noticed this on a 4K monitor that has 150% scaling activated but the issue also shows up with 100%. I have also tried this with different fonts, so apparently it's not an issue with the font, either.
Originally I thought this was an issue with transparency or transformations but finally, I tried simply changing the background color - and it turns out this blurriness is very obvious with red and dark blue (and of course, combinations of those, like magenta), and pretty much invisible with most other colors. Also, by changing the main background color, I can reproduce the issue for the other areas.
You can directly have a look at the site where this occurs here: https://beat-the-rhythm-vr.com/Home/Social (the navigation with the blurry text shows up after accepting the cookies).
Here's an image that shows the effect with different backgrounds, and also rendered on Mac OS (the Mac OS screenshots appear smaller in the image):
As far as I can tell, this does not happen at all on iOS. On the Mac, I don't quite see the issue on the screen but it does become obvious when making a screenshot. This could, however, also be an artifact due to scaling on the screenshot.
This is what it looks like on iOS (I get the same blurriness on Windows when making the Window small enough to get the same layout as on mobile, so that's also not the issue causing this / fixing this):
The obvious question: Is there any way to fix this, and if so, how?
EDIT: This is in addition to the comment on Porter's answer (I can't add screenshots in comments, so I'm posting this here):
EDIT 2: While this article is about a slightly different issue, my guess is that what I'm seeing is really just a limitation of ClearType that is related to what the article outlines: Color-aware ClearType requires access to fixed background pixels, which is a problem if you don't know what the background pixels are, or if they aren't fixed
ClearType apparently doesn't work when the background color isn't known, and from what I'm seeing, it seems to be designed primarily for black text on white backgrounds, also works well with light colors on dark backgrounds but not really so much for red/blue/magenta backgrounds (and any font-color).
I am unable to reproduce this on a 1080p or 4K display, with either mobile or web view on Firefox and Chrome. Fonts do tend to blend with the background color, so not every pixel of the font is going to be the same color; It'll blend on the edges. The smaller the font, the less pixels it has to work with for blending. If you use a larger font, does the same problem occur?
We have been using GWT for our product, We are finding difficulty resolving browser compatibility issues. Firefox displays screens properly, but specifically, some screens are too much wide, spreads across the whole chrome browser. Why so in chrome?
We tried removing some components, like some grids. thought it was responsible for these things. Nothing worked. Did Anyone face the same issue?
I'm having an issue with a thin white border displaying at the bottom of my site just after the footer on iPhone only.
I'm using an iPhone 5 with iOS8 and I've also tested on a 4S with iOS7 and had the same issue. I've tested various Android Devices, and they are all fine.
I can't find anything in my CSS that would be causing this issue. I've tried the negative margin method but that did not work. If anyone else has run into this problem, I could really use some insight on what could be causing it. Thanks in advance for the help!
Here's the link
It might be hard to see it on a white background, but here is a screenshot.
in my site I have problem in proper rendering of icons in Google Chrome as shown.
As you can see the right and bottom edge of image seems to be cut-off. But the same icons renders properly in all other browser including IE, FF, Safari.
Following is the screenshot of mozilla for the same.
Actually icons are of very big size around almost 1000 X 1000px, and I'm showing that in 100 X 100px area. The problem is I can't scale down the images and I have to use these images only.
In chrome when I zoom-in or zoom-out my website, for a moment it renders correctly but again after some time is renders as shown above.
Any possible solution to this?
Thanks for your time!!
I have resolved it myself by using image-rendering css property.
I am about to design a series of tabs with an 11px x 11px "X" for the close icon.
In IE9, if I zoom it to 95%, I saw a image distortion of the "X". I did a test of displaying multiples of the same icons and zoom it, it works perfectly in Chrome and Firefox but not in IE.
I think there is something to do with the custom zoom, because in Chrome and Firefox you can only zoom it by 10% each time.
Please correct me if I'm wrong about this.
Confirmed ^^
I don't think you can solve this. You can't control how Internet Explorer resizes images during zoomchange. Because this is a problem concerning one/two pixels it's only noticable when the image is very small. Internet explorer is obviously calculating the height and the width in different manners.
Why do you expect that an 11px x 11px image would look good displayed at 95% size? If you want it smaller, create a 10px x 10px version.
IE uses a completely different rendering engine to the other browsers.
Internally, when a zoom occurs, it will re-draw the browser area with scaling applied. Some browsers use anto-aliasing and other techniques to remove or mitigate artifacts.
Unfortunately, this isn't something you have any control over.