I have a website and the contact section of the website on larger screens is basically divided onto two sections and separated by a diagonal which I created using CSS3 gradient properties. It render great on Mozilla Firefox. But when I hover on the contact link the diagonal seems to shift a little bit. The effect is significantly small but it can be seen. Have I hit a Chrome based bug? Or is there something which I can't figure out?
The link to the site
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?
I meet a problem on mgwt development and wanna ask for help here. I am developing an application using MGWT and phonegap. And there will be some animation which will interact with user like swiping a panel with an background image. I implemented it by using Css translation. It works fine in browser(both chrome and safari) and in iphone. I use MGWT to create the home page with a scrollPanel in the middle, after clicking the items in the scrollPanel, a touchPanel will swipe to the center to cover the homePage. This swiping animation is done by Css translate3d(x,y,z).
However, when I deploy the application to iPad 4, the background color(using css) start flickering during the panel translation. the scrollPanel in the home screen keep flickering for around one seconde( I guess it is rendering), part of the items disappear and the part of the white background ground is show. The problem also appear in the touchPanel's content. I tried some suggested solution like hardware acceleration using translate3d(0,0,0) but seems it doesn't work.
Do any body know why? Please help, thank you.
This might not strictly be a coding question, but its related so i'll post it up anyway.
I built a website a year ago and never had any problems. I've recently moved to Mac and I've started noticing small colour related issues between my Macbook and my Pro.
In the header there's a background image aligned top right. The background colour of the header matches the image to show a smooth fade from image to background colour. On my Mac Pro it looks fine, on my Macbook Air the image is slightly darker.
I've attached a screenshot of the background image below. You should see a quite obvious swap from background color to background image.
In photoshop the Hex of the background color and image fade are exactly the same.
Does anyone know why this this happens?
Thanks!
http://i.stack.imgur.com/xZJ6B.png
This is likely to be more to do with your screen rather than a coding issue. You will find that all screens display images slightly differently. In fact, the image you have posted will look different to me now, than it does on either of your machines. Often the difference is slight. This can be to do with different display technologies (LCD, CRT etc) or just the slight differences in manufacture.
I'm doing HTML/CSS/Javascript development on iPad. I'm using css transform to translate gallery elements (li elements within an ul). The li's contain text. It all animates fine on desktop, but on iPad 2 device the animation phase makes the font somehow less bright, and when animation is completed the font returns normal. The difference is really visible, almost like going from regular font to bold and back. As said, it all is well on desktop safari, only happens on iPad mobile safari.
Anyone having the same issue?
.pom.
I've seen this and other slightly odd behaviour which is down to hardware acceleration for 3d transforms but I haven't found a single standard 'fix'. In order to try better to understand the problem, take a look at tips here:
http://davidwalsh.name/translate3d
and here:-
How to force re-render after a WebKit 3D transform in Safari
When a photo is displayed on a HTML5 canvas element, and is rotated, the result looks fine in FireFox but terrible in Chrome. It seems as if Google Chrome does not know how to smooth the rotated edges.
For an example take a look at http://www.ernestdelgado.com/public-tests/canvasphoto/demo/canvas.html
Make one of the photos big and have it rotated slightly around its center. Turn on the 'simple mode' so that the photo gets a white border for maximum contrast. You will now see that the edges of the photo are anything but smooth. In FireFox the result is much better!
Does anyone know if this problem can be fixed?
The Chrome team has been breaking and unbreaking anti-aliasing of different parts of Canvas for a year and a half now.
Lots of bugs crop up with the same problem: http://code.google.com/p/chromium/issues/detail?id=7508
Unfortunately, waiting is your only recourse here, unless you want to make an anti-alias effect yourself, which is possible but a lot of work for something that "should" look consistent