Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Suleiman Leadbitter
Suleiman Leadbitter
15,805 Points

Web site won't scroll on iOS

I'm in the process of creating a website and for some reason that I can't seem to fathom it won't scroll with touch on any of the sub pages. You can view it here

Any guidance would be highly appreciated. Many thanks.

  • Sul

1 Answer

Saskia Lund
Saskia Lund
5,673 Points

There seem to be some poorly designed JavaScript elements on your pages. Thus iOS Safari can't render the page properly.

If you turn off JavaScript in the iOS Safari Settings, the scrolling works also on the subpages.

Then there is a server 500 error in the console when loading your page, because you provided a false link to the fonts you desire to use:

<link href="//fonts.googlefonts.com/css?family=Neuton:400,400italic|Nunito" rel="stylesheet" type="text/css">

the correct link would be:

<link href='//fonts.googleapis.com/css?family=Neuton:400,400italic|Nunito' rel='stylesheet' type='text/css'>

Then.. what is this supposed to be for?

<script type="text/javascript">skrollr.init();</script>
<script>//<![CDATA[
$(document).ready(function(){$window=$(window);$('section[data-type="background"]').each(function(){var $bgobj=$(this);$(window).scroll(function(){var yPos=-($window.scrollTop()/$bgobj.data('speed'));var coords='50% '+yPos+'px';$bgobj.css({backgroundPosition:coords});});});});document.createElement("article");document.createElement("section");$(".menubutton").bind("click",function(){$('.navigation').addClass('show');});$(".menulink").bind("click",function(){$('.navigation').removeClass('show');});
//]]></script>
Suleiman Leadbitter
Suleiman Leadbitter
15,805 Points

Thanks for the Google fonts fix because that was bothering me for a while :)

Also you are right the javascript is the problem, but not with what I wrote it actually a Skrollr problem, so now that's narrowed down, I'll look for a fix :)

Thanks