How come? This is the site www.jivanmulders.nl
It isn't the large background image. I removed it and the scrolling experience stayed the same. It's in all browsers ...
I suspect it's the HTML ... but what and why? Thanks for any help!
Omit the background image and all these "jivanmulders_top_A.gif" etc graphics as well. The jQuery localScroll/scrollto seems to work smoothly without them.
It is the fixed background image together with the transparency effects. Being fixed mean that the browser has to re-render the complete page every time you scroll a single pixel.
Related
I have converted a badge/image from PNG to SVG in order to be able to re-use the asset in various sizes etc.
The problem is that depending on the specific webpage i'm embedding the SVG on, it either looks super crisp (as intended) or looks bad with some sort of anti-aliasing gone horribly wrong.
Even on the pages where the SVG looks crisp after load, I only have to scroll the page a bit until it looks horrible as well.
Please look at the screenshots below to see the exact difference on the BADGE (SVG):
It seems the browser only messes with the SVG right where the SVG meets the image behind it. The SVG is only slightly transparent in the gray center, so that should not be the cause of it.
I have tested in Chrome, Edge, Safari which all do the same thing.
Does anybody know what might be the cause of this?
I found a fix to what clearly seems to be a somehow undiscovered big bug in all modern browsers in regards to handling SVG through CSS as a background on an element overlapping another element with background/image.
The fix for my case was simply adding a background-color to the element. Since the element is completely round I can simply make a border-radius as well, so the background will never appear.
If the element however was not a complete round circle, this would not be a workable fix.
I have an odd issue. Sometimes when I load the website I've created within IE8, my main content block loads, the background color for the entire page loads, but the background image I've declared hangs for about ten seconds before suddenly appearing.
This does not happen in FF, Chrome, Safari, or IE10. Have not tested in IE9. I've read that you should try to minimize the size of the background image, so I got it down to around 100kb.
I'm just hoping that someone could give me some insight into why IE8 would hang on loading a background image. Here are links to my page, and my CSS code. Also, keep in mind that I am using GetSimple CMS, so all of the absolute paths I'm using are on purpose as this CMS requires it.
http://expirednews.net
http://expirednews.net/theme/CornerShop/css/style.css
Picture of what is happening:
http://i.imgur.com/ES3LXOf.jpg
I would guess that it's just taking a long time to load in. You've got a lot of graphics there, and the background image will load last. You might consider further delaying the slideshow, and dynamically loading the images into it after both the page has completed, and a small timeout, even 100ms should help significantly.
Another alternative, is to put the background image in an actual img tag that is hidden via css. This should cause IE to load the background image before all the slideshow images. A little bit hacky, but quick and dirty.
I have discovered some problems when I run a page with dark background and image element with some white borders in IE8. The problems is that a white flicker and flash apperas in the top, middle or bottom part of the image when reloading or load another page. I have serched a lot and found a kinds of code to put inside of meta tags, but nothing works for me. Is it really that bad, that a dark background and white borders create this problems in IE and there is nothing to do? Or what could I do to get rid of this flicker and flashes?
The only thing I can think that it would be is a resurrected IE6 bug.
Have you tried fixing that and seeing if that works?
I've built a website for someone, but according to him, scrolling is very very choppy on the website in IE7 on his computer. On my computer I don't have any problems with scrolling (in any browser), i've already tried some things, but according to him scrolling still is very choppy. So I was wondering if someone has some suggestions for me? I think the main problem is the full width background image, but i'm not entirely sure.
The website is:
www.casalagodilugano.nl
The website is in dutch, but for this question that doesn't have to matter
edit:
Tx for the helpful answers. In the end, it was indeed the background image which caused problems in IE7. By accident I found a way to work around this problem: I set the image as the background image, centered the image, and using css3 I made sure the was stretched the way it should.
I had a problem similar to this. It turned out to be because my computer was full and my performance suffered. Viewing the issue on my new machine (also had IE7) produced no choppy scrolling. I fear your client has the same problem, perhaps suggest it's his computer and not your website?
Edit:
Many things affect the processing on a website, I'd suggest it has to do with your background image. The sand has quite a "repeatable" texture so perhaps you should Photoshop it down so it's a much smaller image and just use 'background-repeat' in your CSS to achieve a similar effect. Your background image is also around 200% of what it displays on the website, I copied the URL of the image and viewed it by itself and it's HUGE! The emphasis here is on image file size, because IE is having trouble shifting the image down when you scroll. It's not a very good browser to be fair. I've also noticed that your large header image is larger in actual size, suggesting that the size is reduced by your code. Try reducing this image size to the size you want to display it
Edit pt 2
I've stumbled upon a script that for some reason waits 5 seconds before running and that is the Google maps API. I respect that you need this for the Routes page but if I were you, on any page where there is no map, remove any mention of the google maps api from the source code.
I have found that IE gets choppy when you have an <input> tag without a border or background specified ... very strange IE "bug" but i've fixed choppy scrolling on sites/pages by just adding a border to the <input> tags.
I don't have any code to show as it is on a intranet system. However I have noticed a couple of weird things when looking at it in IE6. This isn't the usual box model problem or IE6 rendering things differently.
One thing that I noticed is on a div where I have a gradient background with repeat-x attribute. When the page loads in IE6 (and any other browser) it looks fine. However when I scroll down the page and back the background appears to repeat in the y direction too?!
Also I have a footer div, which is flush to the content. Again at first this is fine. However when I scroll it off the page and back there appears a gap, which gets bigger when I scroll off and back again. Once more returns it to what it originally (and should) looked.
Are there known IE6 rendering bugs for such problems or is it just bad coding?
Thanks.
Try adding zoom: 1 to blocks with problems. If it works — it's hasLayout problem.