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.
Related
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;
So I'm designing and build a website for school as part of a project, on this page there are 3 images which in Internet Explorer and Firefox seem perfectly fine but when in Google Chrome, When ever you re-size the browser they seem squashed. I tried Googling it to see if there was a bug but nothing has popped up?
Picture comparing Google Chrome with Internet Explorer : http://prntscr.com/22cr26
Live site (So you can see for yourself) : http://baileywhite.comule.com/penguin/Shop.html
You have width and height attributes on the img tag that are not the same ratio as the original image, and that is what is "squishing" the image.
I am working on SVG to render a chart.
click here to view my SVG chart
When we view this chart in Google chrome or Internet Explorer we are getting two groups as expected. but when we render this on Mozilla Firefox, only the first group is getting rendered.
I am unable to trace this out. Pleas help me
Thanks :)
Your problem is setting no useful width and height on the <svg> and also no viewbox. The result is that it ends up 150px tall by 300px wide (the default replaced elements size in CSS) and clips off everything outside that. At least that's what happens in browsers that are actually following the SVG spec here, which IE and Chrome are not.
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.
I have a site that works fine in android browser, FF, Chrome, Safari IE9+ but in IE8 the upper half of an elements background disapears as well as the background color on a couple of input elements.
I have run through IE debugging tools and also W3C and there is nothing that is coming up that would make this occur.
The site in question is http://ukritic.com if anyone can check it in FF then IE8 and maybe suggest what could be causing the problem it would be greatly appreciated.
If you need anything from me let me know and I will post it up for you.
ADDITION:
The problem that is occurring is that in IE8 the white background containing the content is only visible 1/2 way down the page but is hidden on the upper half of the page and also hidden where the facebook like box is located.
In all other browsers the entire content container shows the #FFF background from the top of the page to the bottom of the page.
We have tested in IE compatibility and normal mode but the problem persists.
What I do notice is that while the page is loading the content container is white but as soon as the page loads completely it disappears on the top half and the facebook container.
Thanks
~M
The problem was in the border-radius.htc file as soon as I removed that call the page rendered perfectly.
There really is no effective way of rendering round corners on ie8 as the .htc file needs a relative path to the page that is rendered which does not really work well with dynamic depth address bars (shortUrls).
Guess I will have to settle for rounded corners only in IE9+ and all other browsers.
Thanks for the input