Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

CSS is breaking jQuery scrolling

8:08 am on Feb 10, 2016 (gmt 0)

New User

joined:Jan 5, 2015
votes: 9

I've been stuck on this for a few days so I'm turning to WW for help. I have a site with jQuery smooth scrolling set up i.e. click a link on the top of the page and it whizzes down to the div id further down the page. All well and good. . .
However, I have developed a work around to address the fact that iOS devices ignore background-size: cover; in CSS3. This workaround works well for it's intended purpse and it just has to be in place. Unfortunately, it's breaking the jQuery stuff. I think it's because the html has heigh set to 100%, and I think it's also related to the fact html has overflow set to hidden, while body has overflow set to scroll (this has to be the case for the iOS workaround to work).

I've failed to find a way to make the jQuery work again while these CSS kludges are in place. Does anyone have some ideas? The relevant part of CSS look like this. . .

body {
font:15px/26px 'Open Sans', 'Droid Sans Thai', Verdana, sans-serif;
overflow: scroll;
-webkit-overflow-scrolling: touch;

.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
.clearfix {
display: inline-block;
html[xmlns] .clearfix {
display: block;

html {
background: url('image/background.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
overflow: hidden;

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members