I have a web page with a linear gradient
background: linear-gradient(180deg, #7e7e7e 0%, #454545 100%);
When I take a PNG screenshot with PuppeteerSharp, it looks fine.
However, if I enable headless mode, the gradient looks really blocky, as if color precision is lost when applying gamma correction, or like jpeg compression color quantization...
I tried passing the --force-color-profile argument, and that results in different colors, but the blocks remain.
Does anyone know how to improve the quality of Puppeteer screenshots with gradients?
Related
Every now and then, the background image on my website appears randomly on the sides of the page as seen here: http://i.imgur.com/0HFJF9w.png
It may happen to you too, but if it does, a refresh clears it: http://centralsirescoop.com/proven-sires/harrison/
The couple of lines of code regarding the background (found in body) is as follows:
background-color: #c8dbfb;
background-image: url(images/clouds.jpg), url(images/grass.jpg);
background-repeat: repeat-x, repeat-x;
background-position: 0% 0%, 0% 100%;
Thank you.
EDIT:
Browsing on Window 7, Chrome browser v28
EDIT2:
Error does not seem to occur in Internet Explorer 10
There are some rendering issues with Chrome that I know of, and have experienced multiple times myself. Surprisingly, my searches have not revealed much info on this... But it is definitely there. Even on my Linux system, as well as Windows system.
Try in Firefox and Opera too if you can. I suspect it is Chrome.
The following graphic illustrates an issue with png transparency in Internet Explorer, that I am unable to resolve.
Transparancy not so transparent in Redmond. http://img101.imageshack.us/img101/1917/problemkl.jpg
The transparent graphic is the following image.
http://img411.imageshack.us/img411/7959/transparentfade.png
I realize that it might be invisible on white background, so here's the inverse of the same image to aid understanding.
http://img338.imageshack.us/img338/7121/transparentfadeinverse.png
The idea is to provide a soft lead-out which works nicely on Chrome/FF/Safari/Whathaveyou, but obviously one can't have nice things and IE wants to stand out. I would very much appreciate any help on this matter.
EDIT: I've read someplace that combining opacity effects and transparent pngs is not well supported in Internet Explorer. By removing the opacity effect and making suitable changes to my png graphic, I was able to reproduce same animation across all major browsers.
You cannot safely mix legacy DirectX Opacity Filters and transparent-PNGs. In IE9, you can use native CSS3 Opacity safely with PNGs without the problem you encountered.
I have an image that is sitting on top of a background. In Firefox and Chrome it looks fine as per below:
But in Internet Explorer (any version), it looks like the image background is a different shade than the background (I have put a red box to highlight where the image ends and the background begins, but it's pretty obvious).
How could it be that, given the same image and the same HTML background color, one browser looks fine but in Internet Explorer it looks like the colors are off as the background color of the image is a shade lighter than the HTML background?
The full website is here if that helps.
I think you have different image formats, and Internet Explorer got some image rendering problems. Try to put both of the images background and logo (back-page1.png, logo5.gif) in the same format either GIF or PNG (I prefer PNG) and it should do the trick!
Good luck :)
UPDATE:
So what is this render issue?
As tenfour said in comment, "assuming that the RGB color is really the same on both images, the underlying problem is that Photoshop saves gamma information in the PNG which causes Internet Explorer to render a different color than desired".
I think you need to remove the gamma information in the PNG. See http://morris-photographics.com/photoshop/articles/png-gamma.html for an explanation of this problem. I use http://www.choppng.com/ to remove this section from the PNG.
I have a website where the background has a light gradient (light gray from top to white on the bottom). When I place an image with a transparent background on the website, the background of the image picks the top color of the gradient. So instead of the image's background appearing to be a gradient as well and blending in with the site, the image's background color is just light gray.
I'm not sure if this is the way it's suppose to be (due to the way transparency works on websites). But I was wondering if anyone could provide a workaround
First of all welcome to StackOverflow :)
It depends. First of all, your website will be rendered differently on different browsers, and that's of vital importance to you, because unless you test it on different browsers, you can't be sure what some users will see.
If you've seen a partially transparent PNG that instead of transparency shows a grey background, chances are you're using Internet Explorer 6, a very old browser that you really shouldn't use. It's the one with the blue E, that E stands for Evil. Run.
On a more serious note, having a link to check would help, or a screenshot, because it's hard to tell just by guessing. PNGs should render fine against any background.
On this test page: http:// www.onebagoneearth.com/ Products-test , where it says "oboe love series", "oboe kind series", etc, when you hover over that text (which is a background-image) in IE7 and IE8(at least on Vista, and also with IETester), the image blurs (not just by being opaque though...that would be the normal hover effect). Why is that?
The same thing doesn't happen on this page with similar CSS: http:// www.onebagoneearth.com /Products . If it's the zoom:1 bit of CSS, I don't understand why it would do that on one page and not the other.
I see what you mean, but on my computer it doesn't blur, it gets a noisy outline of dark gray pixels instead.
It's because you are using a PNG image with an alpha channel, and are applying a filter to it. Internet Explorer doesn't handle this correctly and draws the semi transparent pixels against a solid background instead of the actual background.
When this happens and how it appears exactly may vary from computer to computer, and even on the same computer in different situations. That's why some people experience it and some don't.