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?
Related
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.
I'm going crazy with this homepage: http://faboola.it
The boxes with the icons/links below the hero image work fine on chrome and FF, but don't render in Safari (desktop, 11.02). I tried removing every animation, replacing SVG with PNG, but doesn't work.
Using Wordpress with WPJoints/Foundation 6.3
Any ideas? Thank you! :)
Ok, it has to do with the Motion UI animations on the DIVs. Removing the animation from CSS seems to fix the problem. Looks like a bug in Motion UI on Safari:
https://foundation.zurb.com/forum/posts/54883-mui-series-safari-11-compatibility
https://github.com/zurb/motion-ui/issues/97
I removed the animations. :(
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'm working on a website. When I loaded it last night it was fine. It has a background image. It now displays like this in safari on my mac:
Anyway. It works on chrome and on every other browser I can find. Really annoying. Tried quitting and cache emptying. The white square is cropped information. Thanks for any light that can be shed!
I got stuck among the weared behaviour of browsers. Ihave a div which has a background image which has color code #fbc61e so i set the background color of div to #fbc61e.
This works well in Inernet explorer. But when I render same page on firefox an edge appears between image and background where image ends.
When I analysed the snapshot of firefox page I got the colorcode of image #fece00 and when I set div background to #fece00 then edge disappears in firefox but appears in Internet explorer.
Please enlighten me to resolve this problem.
Thnx in advance.
You're probably tripping over embedded color profiles, which IE and FF handle differently. Depending on your graphics editor, you should use something like "Export for Web and Devices" (Photoshop/Illustrator terminology). Set your color profile to sRGB to avoid surprises when exporting.
GIFs and 8-bit PNGs are the only safe choices for what you're trying to do, but you can try getting rid of any gamma tags that might have been written out to your file to see if it helps.