Image only shows when resized/selected - html

So i put up a video on our page http://playgrounddistribution.com
It worked like a charm, until i scrolled down and saw that the image behind the "ABOUT US" section doesn't show until i select it with cmd+a or resize the window. This is rather annoying because the text is white so if the background isn't there you can't read it.
At first i thought the video loaded before the image, so i tried only loading metadata, but that didn't solve the problem. Then i figured it must be the cache, but disabling the cache didn't solve it either. Then i noticed selecting it or resizing the window did the trick, but that isn't optimal for our customers. It only seems to occur in Chrome. Have any of you experienced this problem before or should i include the css?
Screenshots here: http://imgur.com/a/xARmi
Thanks in advance!

Related

Elements overlapping on youtube video

I am having a problem on youtube videos. Other elements(LayerSlider) is overlapping on top of it. This is the link (http://havencab.com.au/). To see the bug, click that link and try to make to video fullscreen.
I came across to the below link
YouTube Video Embedded via iframe Ignoring z-index?
but that didnt solve. Are there any other ways to fix this ?
Putting z-index: 0; on .ls-wp-fullwidth-container appears to fix the issue. I'm not certain why this is, maybe someone else could explain what is happening.
It might also be helpful to know that the you can open the inspect element mode while in full screen (in chrome at least) using Ctrl+Shift+C on windows

Why are images from a previously visited website rendering transparently over another website?

after visiting a website for a long time, and leaving another open during that time, it seems that the layout of the first, appears on the second. It happens mainly when using chrome, but once the issue appears on chrome, it is as if it stays in memory, and happens in firefox too. I read about memory leaks, but I am not sure that this is the issue, and if I am the only one that has it. I mainly see it happening on the website that I am working on which is why it is an issue, but it happens on the black bars of facebook, and another website called jeuxvideo.com . (This is the template my website uses: http://themes.alessioatzeni.com/html/brushed/).
Here is an image showing the issue, where the layout of youtube overlays another website (the transparent grid you can see over the rest of the website):
http://i.imgur.com/FQW7Jin.jpg
Is this a bug with chrome? Because I have looked everywhere and it doesn't seem that anyone else has this issue, or maybe it is just my computer?
This is probably image persistence, where the colours in the monitor get "stuck" temporarily after being on or off for a long time. The fix would be to upgrade the monitor.
You could confirm this by taking a screenshot while the problem is happening. If you don't see it in the screen shot (try moving the screenshot around the monitor when you see the problem, do the affected areas of the screen move too? or are the artefacts stuck in place?) then the problem is with the hardware.

Page elements disappearing in chrome

I have an issue in a site that I've been working on, and it's only happening in Chrome.
After the page loads (link below), everything but the navigation bars and sponsors banner disappears. However, if I scroll down, things reappear the way they should be. Scroll back up, and they disappear again. I haven't been able to test this out in many other places, but I've tried it on at least one other computer (in Chrome) and the same thing happens. I was not the one who built the site originally, but I have been working on it for a while now and have a pretty good understanding of it. However I've never seen anything as weird as this. Other notes: Sometimes the whole background and content disappears, sometimes only portions of it. It's also really laggy, again only in Chrome.
I think this may be JavaScript related, but I don't know. Can anyone tell me why the page behaves this way? Maybe how to fix it? Why it only happens in Chrome? Help would be greatly appreciated.
Link: http://www.calpolysae.org/main/baja_media.php
Here are a couple screenshots too, to show the difference before and after scrolling down.
https://drive.google.com/folderview?id=0B7HP2Q5qXoqrTjdwMldBbzRDVm8&usp=sharing
start with fixing the error on page : "'jquery' with version '1.10.0' not found! "
afer that said,
i think it related to the width of that banner:
<img id="banner" style="position:relative; top:-300px; width: 430px; height:auto;display: block;" src="images/SAElogo.png">
try to make it smaller , set it to :
width: 300px;

Flashing a White page

I have created a website but when i navigate form one menu to another a White flash screen is showing. I google for it but not found the solution. Please help me. Its showing in all browser specially in IE9. Please help me if there any solution for it.
It generally happens when it is loading the next page. If the loading time is more, the white page remains longer. This is a natural behavior of IE and is not-unusual in other browsers too

choppy scrolling in IE7

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.