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

CSS

Issues with Mobile Site of Lake Tahoe Project

I just finished up the Lake Tahoe project in the CSS Basics course. I uploaded the design to my domain to do some testing on my iPhone in Mobile Safari and noticed there were some issues...

1) The page scrolling is choppy. Every time I scroll down and then back up, the header flashes white and reloads. My guess was that this was an issue with the CSS generated gradient. I stumbled upon a little fix. I put a transform3d in the header to cause the hardware acceleration to kick in and that seemed to work and the header no longer flashed. Is this the right way to fix this issue? Is it a good practice?

2) Every time I rotate to landscape mode, the screen zooms in and then the new stylings kick in. And then from landscape mode to portrait it zooms out and then the stylings go back. This delay makes it very choppy and not very fluid. How can I make this smoother?

Here is the website if you want to take a look (just make sure to use safari on iOS): zackrabie.com/laketahoe

1 Answer

Did you declare the default zoom when you switch to the landscape view?

'Cos it's setting it to the device default it seems.

Check this LINK (Mozilla MDN) which should help you.

Let me know if you got the info you needed.