I am using bootstrap-affix to make a search bar fixed on scroll. It's working on the browser, however on mobile Safari it doesn't work as intended.
It does fix to the top, but only once the user lifts of their finger when scrolling.
How do I fix this?
Thanks
Add the following style to your element:
transform:translateZ(0)
Related
I'm working for a responsive website on a slider like FB App. It works fine, but if the user scrolls, the open navigation moves with the content. I'm trying to put position: fixed to the element. This works,but if the navigation element is larger than the screen the rest of the content cannot reached. Example: http://lucie-hauri.com.beethoven.ch-meta.net/ (just put the screen to a width of about 300px an the mobile Icon appears, click on it for example).
Has anyone an idea how to fix this?
Thanks for help, regards
Thomas
I don't know if this is the cause, but you have a javascript error (check the console), which may break things up.
Here is the link to the website I am talking about.
My problem is that when you navigate between the different pages in the main navigation, the main wrapper does not align on the different pages I have used. So if you are on the home page and you click on "WMH" in the main navigation bar the whole page jumps to the left by about 8px.
This creates a jitter between pages that my client really doesn't like. I used some padding-left and padding-right in css to align it correctly. Unfortunately when I get it pixel perfect in Firefox, it is wrong in Chrome and Safari. If I get it pixel perfect in chrome, it jitters in Firefox. This is very irritating. I don't want to have to write separate styles for Chrome, Firefox, IE, Safari unless it really is the only solution.
Thanks for your feedback.
Archie.
The browser scrollbar looks to be causing this. You can force a scrollbar to always appear which would solve the issue. Add this to your CSS:
html {overflow-y: scroll;}
You would also probably need to remove the padding that you tried to fix the problem with originally once the above style is in your CSS.
I have created a drupal theme, URL: http://sundancefoundation.org/
There is a small shift in the layout when we switch between home page and about us page.
This is working fine in firefox only, all other browsers are showing this shift.
I know this is a CSS issue, but not able to fix it.
Any help is appreciated.
Thanks.
The About us page is shorter than the screen height and therefor has no need for the scroll bar on the right hand side of the screen. The home page is longer and has a scroll bar. When the scroll bar appears or disappears it looks like the screen is shifting but that's all it is.
This css rule will simple fix the body width flickering issue:
body {
overflow-y: scroll;
}
I have a stylesheet and use overflow:scroll; in my css to blend in scrollbars. It works in Firefox but not on my iPad in the safari browser. There, no scrollbars are shown but it is possible to scroll with two fingers.
Now, is that normal that iPad doesn't show scrollbars? That would be stupid somehow.
You might want to turn it on with: -webkit-overflow-scrolling: touch;
Yes, I believe that is normal behaviour from iOS3 and upwards.
You might want to check it on android, as android does not support overflow:scroll at all, from what I am aware (no two fingers, no scroll bar, no way to view content beyond the fold)
More information on iphone/ipad scrolling
Thanks in advance for helping me with this problem, it's driving me up the wall.
I have a site that renders fine with firefox, chrome, safari but on IE the vertical scroll bar is not functional.
I'm using sticky footer css to make sure the footer is pushed to the bottom and it works fine in the other browsers but I suspect it's affecting the height in IE
any help is appreciated.
The site is up at dev.rakozi.com
thank you.
Well firstly in Chrome you don't get scroll bars at all, no matter how high the window is (because the footer is set to fixed).
In ie 7 you get scroll bars that appear but scroll to nothing. In ie8 the footer doesn't stay fixed properly, but you don't get scrollable scroll bars (and for some reason the background gets corrupted on my computer if I adjust the height too much).
Can you clarify your question a bit more, what exactly are you trying to achieve?
Removing height:100% from the body in ie7 makes the scroll bars go away, if that helps?