I have some icons that are set to animate on hover (so there are two images per icon, a static PNG and an animated GIF). Since the icons are meant to be responsive, I'm using Bootstrap's img-fluid class on each img element.
In Chrome, both the static image and the animated version display properly - edges are smooth and antialiased. In Firefox and Chrome, however, the animated GIFs appear pixelated and I have no idea why. Is this simply due to how each browser renders resized images, or is there a way I can fix it?
Codepen sample here - hover over each icon to see what happens. In Firefox and Edge, there's a noticeable jump between the smooth-edged static PNG and the pixelated GIF. This doesn't happen in Chrome.
If it matters, my versions of each browser are:
Firefox 65.0.1
Microsoft Edge 44.17763.1.0
Google Chrome
72.0.3626.119
Help much appreciated.
Related
I have an SVG which gets blurry when any element in any place on the page shows a scrollbar.
The SVG has this aspect:
Normal SVG
But when other div which is in another place, gets a scrollbar this happens:
Blurry SVG
This seems like very odd and happens in Chrome, Brave, but no in Firefox.
Maybe anyone could share some thoughts about it.
I've tried making the SVG bigger in case it was a scaling problem but no luck so far.
Having an issue with the header logo on a wordpress site. Logo appears incredibely pixelated on Firefox, but is smooth and appears as expected on Google Chrome and Safari. Even after trying .png, .svg, and even .jpg, the logo still appears very pixelated on Firefox browser. Even after scaling down/up the images resolution, still appears pixelated.
CSS attributes such as image-rendering have no effect on the image. Any reason why this would be, or any possible fixes for it?
Comparison Photo between logo in FF and Chrome
Try this CSS for the image:
image-rendering: auto;
I am facing very strange problem with Firefox and GIF image. I have two-three GIF Image in a web page all the GIF animating except one
A GIF image which is not animating in Firefox (Shows Last Frame), does animation in all other browsers like Chrome, Safari , IE. I have latest or nearly latest browser installed.
Please help me to resolve this issue. can that be a problem of Animation Engine like stuff?
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.
When viewing http://adam.inbulgaria.org in Firefox, it displays as it should; in Chrome and Opera, however, the floated image containers misbehave. I'm sure this has to do with my use of experimental properties (rotation, transitions on hover), but what can I do to make it better?
To clarify, in Chrome 17.0.963.56 m, when hovering above the images, some empty space appears under them. In Opera 11.11, there's space to the right of the images, even when not hovering.
It shows up like it should in Chrome 17.0.963.56 on Mac. The only difference i can see is the font size + the horizontal bars look different.