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;
Related
I am trying to make a website and was looking at this template (http://www.uipasta.com/wordpress-preview/rolling/).
I really liked the "testimonials" part and was trying that on my code.
However, I realized that "testimonials" part works totally fine on Chrome with any browser size, but not on Safari.
All the elements of testimonials get overlapped on Safari when I first open it up... It's funny because if I shrink or enlarge the browser and keep doing it like that, the elements stop overlapping and work perfect like on Chrome.
I tried to modify some stuff in css files and tried to find a bug.
But, all the attempts failed in vain... Can someone help me out with this?
LOL I can't even upload more than 2 links yet, because i don't have enough reputation... Here is how it looks on Safari, https://i.stack.imgur.com/kza7d.jpg
but yeah that's how it looks on Safari when it should be clean carousel moving objects.
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.
I'm in the middle of development of a website, however I cannot work out what is causing this plethora of issues.
In Safari on OS X (7.0.6 on 10.9.4), random elements will disappear and reappear and hovering over the drop down menu, or a button, they suddenly re-appear. It is very strange and erratic.
In Chrome (v36.0.1985.143) and Firefox (v31.0) the scrolling performance is poor, but no rendering issue.
All onscroll events are clean. I've tried tweaking with just about everything and gotten nowhere.
If anybody can work this out, I'll be greatly appreciative.
Thanks in advance.
I don't see any scrolling performance issue on chrome or firefox, but I noticed Safari rendering glitches.
When you force reflow, all your sections are displaying again. Try to add a backface-visibility:hidden; on your .section class.
Edit:
Your #background-area is fixed and doesn't have any z-index. Put it to z-index: -1; to keep it in the back.
Background info: I'm working on a public facing website for our company. developing in VS2012, asp.net and vb.net, using some JS, some JQuery, and a decent amount of CSS.
Everything was looking great in our internal testing, until someone checked from home, where they only had IE 9. Suddenly, big chunks of text within expanding panels weren't being displayed, the bottom of the page was missing in most cases, some links that call javascript functions don't do anything... It's so random that the only reason I think they're connected is that it only happens in IE9 (or probably before, though no one has looked.)
I tried setting the standards mode to edge in the web.config. (tried setting it to IE10 as well, just to try) I've played with changing some positioning, heights in px instead of %, relative to fixed positioning, tried inserting the html5shiv, removing the gradients... nothing has changed. Everything displays correctly, until it doesn't display at all. When I was starting to see and research this last week, I thought I'd found an article somewhere that said there were limits on the CSS tags you could use in a page for IE9, but that number was WAY higher than anything I'm using, including both what's on the page directly, and incorporating the .css file. The only other clue is that it looks like at the bottom, where the missing stuff starts, I also lose the gradient from the page background (so just a block of all white, however if I play with the size of the window, sometimes I can get this block to slide down, and I can see another line or two that was originally hidden...
Has anyone had issues like this? The site works perfect in chrome, ff, IE10 and 11, several Linux browsers, opera, safari, from macs, pcs, and Linux boxes. everything except this old IE 9.
HELP?
Just a little hack fix I found, if anyone comes across this question looking for similar answers... I created a new css file implemented when IE9 browsers are detected, and I extended the min-height for the content of pages until every page displayed... the drawback is that on those longer pages, if the content isn't expanded, the footer still lies several scrolls down... but this only happens on the very content-lengthy pages, so while it isn't ideal, I guess it's good enough, if someone's ok with using outdated browser technology :/