as said in title, I am having problems with background-attachment:fixed in internet explorer.
Here is an example of my problem:
JsFiddle
As you can see, it works nicely in all browsers accept IE. What I have noticed is that if you disable smooth scrool, the jumping stops(Tools --> Internet options --> advance --> Browsing -->Smooth scrool), but the page does not look that nice. This is of coruse not a solution, because one can't explain to visitors to disable smooth scroll.
So...does anyone have any idea how to solve this?
This is a bug that Microsoft are working on. It's so bloody annoying
Related
Can someone help me understand why certain things aren't working on safari but do on chrome?
These are apparent on both mobile and desktop.
So here is the website I'm currently working on: http://stage.coefficientlabs.com.s3.amazonaws.com/index.html
Problems:
1. The hero video plays smoothly on Chrome but not on Safari.
2. (main issue) Once the "Get Started" button is clicked, a modal appears. All the styling and content seemingly hidden(?) on Safari but not on Chrome.
Any idea what is going on here?
Thank you!
Turns out the issue was "overflow: hidden". I think is a known difference for Safari in general.
Bootstrap autohiding navbar works jumping when we scrolls on internet explorer browser
it is not smooth. please give a solution
link is http://www.usawebdept.com/designprojects/Almarelo/demo1/buyer-Dashboard.html
I found an article exactly on your issue posted.
http://css-tricks.com/eliminate-jumps-in-horizontal-centering-by-forcing-a-scroll-bar/
Also listed in the comments are some other suggestions if you don't like the suggested answer, such as:
html {
min-height:100%;
margin-bottom:1px
}
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.
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;
This is driving my mad... In Chrome my page leaves a black line exactly at the bottom of the page when loaded. It's visible when you scroll down.
Here is a link tot the page: http://www.white-board.be/kaartings.php
I don't have this issue on other pages of my website. I tried changing css-settings, without succes.
The odd thing is, that when I do a crtl-refresh, the line is never there. Does anyone have an idea of what micht be causing this?
In IE, Firefox and Safari I have no problems at all.
edit: screenshot (I have the same problem at work and at home, win XP and win7)
chrom version: 26.0.1410.64 m
ok I found out what was causing this. For some reason (don't ask me where I got it from or why i thought i needed this) the following line in my css body setting made the problem occur:
-webkit-transform: translate3d(0,0,0);
Deleting it, solved it.
Thanks alot for the responses!