The following problem only occurs in Google Chrome. Firefox, Opera, Safari and IE are doing fine.
I have a background on my body:
background: url('../../../views/blog/images/achtergrond.png') 50% 0 fixed repeat-x;
Then when I scroll the page and then reload only a part of the image is displayed:
The full image should look like this:
Note: See the actual website
Background loading is working fine in my chrome as well..
The issue may be you stoped the browser loading while image is loading:
Also do this thing:
Make the size of background image more smaller that will help you to download background more easilty and fast..
Right now your background image size is : 1.73MB
That is so huge...
Do this and background will load more fast and will not cause issue in any browser...
Related
We are currently copying airbnb.
The top image does not disappear even if I check the responsive view on Mac, but the image disappears when I check it on iPhone.
Tried: I used background-size:cover and tried height:0 and padding-top:60%.
If you know how to fix it, please tell us.
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.
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