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;
Related
I'm making my first site with gulp.
I'm working with a mobile menu. When I click it, I want it to translate to the right. It works fine.
The problem is that when it goes right it enlarges the whole site, I even tried with overflow:hidden but it didn't work. Among the others I also tried to make display:none, but it didn't work either.
Here you can see the problem:
Can anybody help please? Here is the link to the repo.
I think that it might be a zoom triggered by the browser. I can see that You are simulating the mobile view. That's probably the reason why it happens.
I've never tried that but i found something like this -> How to stop chrome responsive inspector from changing the zoom?
take a look :)
Simple workaround is to change transform: translateX(170px); to transform: translateY(-400px); on .page-nav with 840px breakpoint.
This is where the issue comes from.
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!
Trying to attain a near-exact cross-browser experience for our clients, lately, I've come to a problem that I can't fix. I've got the website up and running, and it's functioning smoothly on every and each browser, expect Mozilla Firefox. The problem that occurs in Firefox, is that I get to witness a broad white space on the right side of the site's main contents, and it is arising from my responsive css3 slider. The link below shows you 100% of the slider's codes, which works perfectly on jsfiddle;
Css Slider
but well, the problem is that each article tag is taking its space, even when it's hidden and not being displayed in Mozilla. So the more the slider comes toward the end of it, the less white space I get to see. The next upcoming slides are hidden, but however, they are still occupying a certain space, which forces a lot of vacuous area on the right side.
You can check the website itself at the link below;
My Website
Hoping that I have clearly stated the issue, what could be the possible solution for this matter ?!?
Adding overflow-x: hidden on the <html> tag seems to fix it. I'm not sure why, though. Hopefully someone has a better solution.
I am developing website and have a strange bug that appears only on Chrome. I have a latest Chrome version and as I googled it seems to be old bug on older versions of Chrome(v18 - v20). Basically what happens: browser loads page, but on the bottom of the screen I have white spaces/rectangles instead of content or footer. Once I hover it - the rest of the content is loaded. Any ideas, links or solutions would be great.
I tried to work with this around with setting height to auto, but this didn't help. Also tried to load page in incognito to make sure it is not caused by any of the extensions I use, but this as well had no affect in resolving the issue.
Another solution that I think of is to set interval to re-trigger CSS in some milliseconds the page is loaded, but this is not the best solution and there should definitely be some other, more optimal, way to solve this.
P.S.:
All other browsers work like a charm.
Thanks in advance for the help.
In my case issue was with fade-in animation set on whole content. As website owner decided to skip the animation to save time. No further digging was done.
Folks I'm baffled. I've produced an HTML page which uses CSS animation and some very basic Javascript. Although I'm sure I haven't done it the best/most efficient way (still a bit new to this), it works enough for me to be happy with it, but when running in Chrome, Safari or Opera I run into an intermittent issue with how some elements are rendered.
Live example: http://careers.dept.shef.ac.uk/MOOCs/STAR/
Navigate down to "Problem Solving Skills", then from there navigate to either "Communication skills" or "Leadership skills". The navigation buttons that were at the bottom Problem Solving Skills are still visible. But they're not really there... if I hit Ctrl+A they disappear. You can't click on them, they're just left there.
I've tried this on a few PCs and had the same issue. Sometimes it doesn't happen at all. It doesn't seem to happen on IE or Firefox. Could it be to do with how these browsers render elements and how they process opacity?
Many thanks in advance.
EDIT: here's a screen grab: http://i.stack.imgur.com/FPtGQ.png
It's a long shot, but you have malformed HTML on those buttons, trying fixing that and see what happens:
<p class="btnText">Communication skills</p class="btnText">
should be:
<p class="btnText">Communication skills</p>
Edit
Okay, try adding this style to .example2:
height: 100%;
and change overflow to:
overflow:hidden;