Mac OSX Lion's scroll breaks the web

To all of those complaining that "side scrolling is a bad idea": This is a red herring. The chief complaint here is that Apple made a single gesture which in the past caused a single action (scroll to the left) and made it modal, such that it means "scroll left" UNLESS (1) the user is in Safari and (2) there is no more content to the left, in which case it means "go back".<p>This is an excellent complaint, and it has been raised before by users (<a href="https://discussions.apple.com/thread/3192014?start=0&#38;tstart=0" rel="nofollow">https://discussions.apple.com/thread/3192014?start=0&#38;tst...</a>) and bloggers (<a href="http://www.tuaw.com/2011/08/02/baffling-inconsistencies-in-os-x-lion-multi-touch/" rel="nofollow">http://www.tuaw.com/2011/08/02/baffling-inconsistencies-in-o...</a>). It's a UI inconsistency which makes no sense, is confusing for users trying to scroll, and causes problems for developers.<p>Regarding reverting it, the following Stack Overflow question and answer seems to have found a solution via a github plugin:<p><a href="http://stackoverflow.com/q/8737709/168775" rel="nofollow">http://stackoverflow.com/q/8737709/168775</a><p>I have no idea if it works. Good luck!

Can we just stop the horizontal scrolling on websites already? Users hate it (countless usability studies), it's ergonomically difficult to perform it consistently with a mouse, and it always seems "too clever" like someone was trying to think outside the box.

Sounds like you are planning to break my browser's back functionality. If I were evaluating your site, you'd need to be pretty compelling to get to do that more than once.<p>There is a huge visual clue to the user that they are doing a "back" instead of a scroll (the whole page moves off to reveal the previous page behind it). It can be done accidentally, but a user will know what they have done and return. (In the static case, you have to move the page at least a quarter of the way out of the window. If you do a dynamic release it looks like less depending on how fast you are going. A "flick" could get you an accidental "back".)<p>Without looking at your site, I'll suggest that the bigger issue is that either "back"-"forward" isn't a no-op, or you leave a string of strange things in the back list. Both are common and both annoy users.

I found nearly all Lion's UI changes annoying, and instantly looked for ways to revert them after installing. It made me worried that Apple is getting Redmond Disease. Windows used to have a nice unified UI -- learn once, use anywhere -- before "creative" monstrosities like the new Office UI.

It's interesting that you mention that "it breaks the web with a non-standard behavior".<p>Anytime I have to scroll horizontally in a browser, it feels awkward and non-standard (especially if I have to scroll horizontal AND vertical).<p>Whilst it's just my preference, I'd sooner not have <i>any</i> web pages scroll horizontally.

With some web apps, you can actually lose data because it's so easy to inadvertently swipe back in Safari for Lion. This only seems to happen when the page tries to catch the unload event and throws up a "Leave or Stay" dialog. Choosing the latter does _not_ return the user to the previous page as it should, so if you were in the middle of typing something when you accidentally triggered the Back event, you've lost that work.<p>I've seen this happen with JIRA and Gmail. Hacker News, which does not attempt to catch a user with unsubmitted data, works just fine. You can type a comment, swipe back, then swipe forward, and your comment will still be there.

<i>I’ll keep looking for a better solution to prevent this event completely in JavaScript. Apple, Google, are you reading?</i><p>I think it's pretty safe to assume that apple &#38; google won't be providing you with a javascript api to inhibit page back &#38; page forward.

It isnt the scrolling that "breaks the web," but the forward &#38; back being two finger swipes -- the same as scrolling.<p>I've made my forward/back three finger and spaces switch to four finger, seems to work well.

Why is it just OS X Lion? Snow Leopard has horizontal-scroll to go back/forward in browsers also.<p>As someone who uses this gesture all the time I'd be <i>very</i> annoyed if a page hijacked the scroll to prevent my forward/back.

I think this "breaks the web" accusation is reactionary and short-sighted. Touch screens can't support onMouseOver; does this mean that all mobile devices "break the web?" Things change and innovation happens, and whatever the user likes best will survive. Figure out what the <i>user</i> wants or be left behind.<p>FWIW I <i>like</i> a lot of the UI change in Lion, natural scrolling in particular.

Do people really have this problem? To transition from scrolling to page-turning requires a significant swipe across the pad -- where scrolling would've stopped, and then you'd have started to see the 'go backward' arrow appear across the screen. I find it difficult to accidentally go backward or forward when I'm scrolling horizontally, unless I'm scrolling 'violently' left and right. Is this typical behavior for your app? (such as a user getting to the 'end' on the right, and then wishing to return to the full beginning on the left?)

This is part of a much bigger evolution occurring in the UX space. This whole change is part of Apple trying to unify their UX across tablets (where "paging" with a swipe is nice) and laptops. One of the most core tenets of UX is consistency and this is an attempt to start to add some UX consistency between Mouse pointers and Gestures. Long term this consistency is a <i>good</i> thing. Short term its going to cause some pain.<p>Here's the thing its only going to get worse as more and more devices and interaction models start working their way in. My company does bespoke app design and development across a lot of emerging platforms. We're building apps that work on connected TV's, Game Consoles, and mobile devices. Right now we have a project which has an app on LG/Samsung connected tvs which need to be navigated via a traditional up/down/left/right enter remote and the LG TV "Smart Remote" (basically a Wiimote pointer - or a mouse). We're porting this app to the Xbox, on which we need to support the console constroller/Kinect Gestures and Voice. As well as parts of the design are making their way into tablet devices with gestures. One App/Design - 5 different input mechanisms.

There's a lot of anti-sidescrolling sentiment in this thread... which I find odd considering how common place sideways gestures are on touchscreen devices.<p>I'd say that sideways scrolling has a big future ahead of it and in a lot of cases is better than having to press prev-next buttons.

This behavior doesn't break the web. It breaks the user experience for Lion users. It's their problem, not yours. Stop wasting your time on it. You have better things to do! Apple will fix it if it's enough of a problem.

We just ran into this problem yesterday. A box with overflow: scroll will appear un-scrollable to users. It is a great example of form over function. Apple is too far on the form part of the equation quite often. Another example are the sharp edges on laptops... it makes you wonder if "user is able to slit wrists with edge of laptop" is one of their user stories. Obviously "looks cool" has it's drawbacks as a product requirement ( and I'm a designer ).<p>Slicing apple with laptop video: <a href="http://www.youtube.com/watch?v=rZvMlzVxQJE" rel="nofollow">http://www.youtube.com/watch?v=rZvMlzVxQJE</a>

I have had to hold back from implementing features in web apps because of this behaviour, I love swiping to navigate back / forward on normal websites, but in some applications it really destroys their capability<p>Saying "dont scroll horizontally" is not a solution, there are a lot of solutions where scrolling horizontally is required, think of a drawing tool with a fixed width canvas, or a spreadsheet where you can only go to column F

Minor point for me: The twitter button was laid out in such a way that I thought the first sentence was "... elements like [TWITTER BUTTON] kanban views and Gantt charts" not "elements like kanban views and Gantt charts" and twitter button off to the side. Poorly cropped shot here: <a href="http://imgur.com/sbZ4t" rel="nofollow">http://imgur.com/sbZ4t</a>

Change back/forward to three-finger swipe. Problem solved.<p>It should be that way by default, hopefully that changes in an upcoming patch or 10.8.

Overloading the horizontal scroll with page navigation is a bad idea, and although hyperbolic, does, in my opinion, break the web. Apple should change the default behaviour to avoid the overload. I am developing an app using horizontal scrolling and hadn't noticed this particular issue before unfortunately :(

I just posted an update to the post with the screen we're showing (only once) to "teach how to disable this".<p>I believe that's the best compromise: Keeping the scroll behavior, but teaching you how to change it. <a href="http://cl.ly/1R0T1Z1n2y160C1V3V0V" rel="nofollow">http://cl.ly/1R0T1Z1n2y160C1V3V0V</a>

I've noticed the lack of a scrollbar completely confuses me on sites that have a scrollable iframe and there's no content "cutoff" to illustrate there's more stuff to see.<p>I recall the startupweekend website had this issue but they seem to have redesigned around it.

Horizontal scrolling is an anti-pattern imo, if you want 0-friction horizontal panels, include a column with a massive arrow to the sides so users will know there is content being cut to the sides.

I have to agree. It also bothers me when scrolling down a page that contains a scrolling div, The scrolling stops, scrolls the contents of the div and then moves on. While logical, it's jarring.<p>My solution would be for OSX to only scroll the contents of a div if the scrolling action started on that div, and never to scroll the page if the scrolling gesture started on an element which responds to scrolling.<p>That sort of behaviour might fix the issue. Although, perhaps fwd/back swiping in OSX should only be three fingered by default.

Am I the only one who thinks it's awful that a website developer is even trying to detect and disable this feature? As a user, the interface to my OS and browser remaining consistent is much more important than disabling a single feature that may cause trouble on a single website.<p>In fact, I find it presumptuous that they are trying to even detect this, and then tell the user to disable it system-wide!

One of the first things I did after installing Lion was changing switching spaces/fullscreen apps to a 4-finger swipe and navigating back and forward to a 3-finger swipe. I think I mainly did it because at the time Chrome wasn't "Lion-aware" yet. Like a lot of Apple's UX decisions this is one of the many boneheaded things they like to piss their users off with on a regulary basis.

This is a user issue; It's the way your one finger swipes work on multi-touch. You'll also notice when you swipe with one finger it navigates backwards (as noted in the document).<p>You can adjust this in your OSX mouse settings by having it to two fingers (which is very handy). I switched mine instantly and now i'm able to navigate through various pages with two finger swipes.<p>This isn't OSX breaking the web...

I think many people felt Lion wasn't an improvement in speed or usability over the previous OS. Instead of respecting the differences between a desktop vs. tablet and building the absolute best system for each; it attempts to merge the two and provides a less than ideal experience. I love my Apple products but I can say after many months of using Lion it is disappointing.

I think it's multi touch gestures, not "Lion's Scrollbar". Honestly, I love the feature and use it all the time and I like the fact that I can see when I initiated it and just unscroll to sotp the action.<p>I don't think it's such a big deal. The only websites that have this problem are horizontal scrolling websites, and even then it's usually when I'm playing around with the mouse.

<i>If you want to prevent this, your options are limited.</i><p>Good. Stuff breaking the web, the web should stop breaking the browser! Disabling right click menus should never have been allowed, nor should Flash overriding browser/OS hotkeys, nor should sites hiding browser chrome in new windows, nor should disabling zoom on mobiles, and nor should stopping back navigation in JS.

I was going to check out their UI but trying to sign in with twitter gives you:<p>Authorize Teambox to use your account?<p>This application will be able to: Read Tweets from your timeline. See who you follow, and follow new people. Update your profile. Post Tweets for you.<p>And for google:<p>The site teambox.com is requesting access to your Google Account for the product(s) listed below.<p>Google Docs Google Calendar Google Contacts Gmail<p>wat?

You can't really call it breaking scrolling, you can still scroll back and forth, up and down. The two-finger gesture on the other hand has been reserved for back/forward.<p>Personally I'd take gestures for moving back and forward in history over the ability to easily scroll horizontally. I find it very unintuitive and awkward.

The rant surprised me at first because it doesn't happen on my MacBook. But sure enough, I disabled it (as well as reverting scrolling back to normal).<p>I also dislike that the "delete" key backs up a page. It should not be so easy to accidentally move pages, especially since it potentially messes up form data.

Oh, nonsense. Lion's gestures make the web MUCH more easy to browse, for me. All you have to do is change the forward-back gesture to three fingers, if you want it to never interfere with scrolling. This takes five seconds. To say this "breaks the web" is silly and hyperbolic.

Lots of comments are about horitzontal scrolling being a PITA. The author point is that some web-apps (trello?, plurk?) may be broken by a non-standard behaviour implemented in some browsers.<p>I would love to see javascript hooks to this events so you could cancel this behaviour programatically.

In Firefox, I can use alt+leftscroll and alt+rightscroll to go backwards and forwards respectively. Personally I find this works perfectly. Whenever I try to use Chrome on my laptop, I am disappointed I can't use this.

You can turn off the horizontal-scroll triggering Back/Forward in System Preferences &#62; Trackpad &#62; More Gestures.<p>Set "Swipe between pages" to anything other than "Scroll left or right with two fingers"

Doesn't event.preventDefault() cater to this case?

"Breaks the Web"? Really? Maybe you shouldn't be treating the Web as a pixel-precise platform with a single control model.<p>The Web is all about separation of concerns and unintended reuse; it's about browsers being able to innovate and provide new features while staying backwards-compatible with existing <i>reasonable</i> content.<p>If you want perfect control, go use Flash or Silverlight (and, thereby, die in a fire).

Breaks the web? You mean breaks your site, I am still happily browsing 99.999% of other websites.

Web works ok for me over here.<p>- Linux/Windows user

Anyone has a cache?

&#62; Teambox 4 is our newest release, and it’s awesome.<p>Web developers have spent the better part of the past decade avoiding anything to do with horizontal scrolling as it's far from the best way to display information to the user in both software and hardware configurations and Apple simply went ahead and codified what had become a standard convention. And if you pick up any tablet product, regardless of manufacturer, you can confirm this.<p>If you're still intent on designing apps that don't follow convention while simultaneously blaming manufacturers for a poor user experience, then I have nothing to offer. The rules of the web are not set in stone and they will evolve over time as users either demand a different experience or become accustomed to and expectant of certain functionality that works for them.

make native apps and stop doing that web bullshit then?