
Mac OSX Lion's scroll breaks the web - michokest
http://micho.biz/mac-osx-lion-horizontal-scroll-event/
======
eykanal
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".

This is an excellent complaint, and it has been raised before by users
([https://discussions.apple.com/thread/3192014?start=0&tst...](https://discussions.apple.com/thread/3192014?start=0&tstart=0))
and bloggers ([http://www.tuaw.com/2011/08/02/baffling-inconsistencies-
in-o...](http://www.tuaw.com/2011/08/02/baffling-inconsistencies-in-os-x-lion-
multi-touch/)). It's a UI inconsistency which makes no sense, is confusing for
users trying to scroll, and causes problems for developers.

Regarding reverting it, the following Stack Overflow question and answer seems
to have found a solution via a github plugin:

<http://stackoverflow.com/q/8737709/168775>

I have no idea if it works. Good luck!

~~~
stephenr
The problem isn't apple or safari. Chrome copied a safari feature poorly, THAT
is the problem.

~~~
mikeryan
I dont' think thats correct. This occurs in Firefox as well.

~~~
stephenr
I've checked in Firefox 9 and Chrome 16.

Chrome is terrible compared to safari - the notification to the user is a very
small barely visible arrow that gains visibility as the user scrolls further
sideways.

Firefox is terrible compared to chrome, it just happens.

So as I said - Safari does something great, others copy it poorly, and "Lion
breaks the web".

------
flyosity
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.

~~~
nirvdrum
The place this trips me up routinely is reading code on GitHub. I think they
rightfully boxed the source file view to be fixed width so it doesn't blow out
the rest of the layout. And it'd be inappropriate for them to wrap the code in
that view. So, we have a scroll bar, which works fine, except on a trackpad on
Lion.

~~~
justincormack
Why is it inappropriate to wrap? It might need some language specific code for
old Fortran versions but should be doable...

~~~
nirvdrum
Have you ever tried to read wrapped code? It's pretty terrible. Obviously
that's opinion, but I've never come across anyone that's disagreed. Plus, your
line heights now differ, which makes navigating vertically even harder.

~~~
rwallace
I don't disagree that the usual implementation of wrapped code is pretty
terrible (because it goes back to the start of the line, thus spectacularly
breaking the indentation-based formatting - UltraEdit is the only
implementation I've seen that gets it right), but it's still the right thing
to do because the alternatives are even more terrible.

~~~
nirvdrum
I didn't think horizontal scrolling was too bad, until Apple screwed that up.
For a while, I could just use Firefox, but they implemented this same
behavior, but without the nice animation. So, it's even more befuddling.

It's one of the many reasons post-Lion that I've decided to just move on to
another OS. I shouldn't have to adapt the way I work to some OS updates
quirks.

------
jws
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.

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".)

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.

~~~
benaston
Not at all. The behavior in Lion (inverted scroll movement, bouncy scroll
edges) encourages the user to see themselves as actually touching and directly
manipulating physical objects on the screen (cf iPad/iPhone). One such
resultant user-behavior is "flicking" to quickly perform the scrolling action.

If this behavior is overloaded with a navigational function, the user now may
very well accidentally invoke the navigation function with a flick and lose
data (HTML form data for example.)

This is a genuine usability issue that needs to be addressed by Apple.

~~~
rayiner
The real world metaphor of flicking versus scrolling is quite obvious (you can
move a paper on your desk, but flicking it will result in that paper not being
there anymore).

~~~
benaston
Certainly, but the inertial scrolling on OSX actively encourages flicking as a
mechanism to scroll a long distance. A genuine feature IMO.

…except, if you happen to be in a browser and at the far left or right of a
page, then a big context switch suddenly occurs and navigational action is
performed, potentially losing valuable state.

The use of two finger "flicking" is unnecessarily overloaded. Apple can solve
this by making 3-finger navigation the default.

------
api
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.

~~~
untog
Agreed. I think the worst offense in my book is reopening all of my previous
apps when I restart. Not only do most programs still not support it (so they
don't reopen my documents etc and just sit there) often the whole _point_ of
restarting was to get myself to a nice fresh slate. With "sleep on lid close"
and other such things I never actually power my computer down these days.

~~~
crazygringo
No, the worst is each _application_ remembering your open windows.
Particularly Preview.

Let's say you view a sensitive image in Preview, then use Cmd+Q to quit. A
week later you open a new image, directly from the Finder, to show a work
colleague, and it opens in Preview.

First Preview loads up the previous sensitive image (restoring the state of
Preview), and afterwards your work image. Work colleauge sees sensitive image.
Embarrassment all around! (Well, actually just lots of laughs, but it could
have been!)

Moral of the story: _always_ use Cmd+W to close all documents individually in
Preview, and only afterwards Cmd+Q.

Bigger moral: Apple really messed this one up. Opening applications via
documents in the Finder shouldn't restore previous application states, because
the whole point is that you're starting with a new, specific document.

~~~
falling
Doesn't really solve the issue but you can globally disable per-application
restore in Preferences and you can use Cmd-Opt-Q to make apps forget currently
open windows instead of manually closing documents.

~~~
crazygringo
I had no idea! Thanks. Done.

(It's under General > Restore Windows When Quitting and Re-opening Apps)

Now if only there were a way to stop Document Versions from irrevocably eating
up hard drive space...

------
helipad
It's interesting that you mention that "it breaks the web with a non-standard
behavior".

Anytime I have to scroll horizontally in a browser, it feels awkward and non-
standard (especially if I have to scroll horizontal AND vertical).

Whilst it's just my preference, I'd sooner not have _any_ web pages scroll
horizontally.

~~~
tomelders
I'm a big fan of sideways scrolling in the right places. Apples own product
nav on the website would be a great place for two fingered sideways scrolling
to be implemented.

For reference: <http://www.apple.com/mac/>

~~~
ConstantineXVI
That pane did have horizontal scrolling at one point; think they changed it ~
Lion release (since no more scrollbars)

~~~
tomelders
It didn't work with swipe gestures as I recall. I remember because I was
looking for a good side-scrolling implementation that used swiping about 2
years ago and thought that might have it.

Not that it matters, I'm just clarifying.

------
cobralibre
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.

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.

~~~
X-Istence
When typing into a text box field and navigating back Safari will actually ask
you if you meant to do that. It is the same behaviour when you close a tab
that you've typed in, or close a window that you've typed in.

~~~
cobralibre
True, Safari will present a warning dialog if you have entered text and you
attempt to close the current tab. It will not do this if you initiate a Back
action (easily verifiable with this very site).

The latter behavior is fine in most cases, as you can initiate a Forward
action and return to the page with your text. There is a specific case where
this is broken, which is what I was talking about.

------
trotsky
_I’ll keep looking for a better solution to prevent this event completely in
JavaScript. Apple, Google, are you reading?_

I think it's pretty safe to assume that apple & google won't be providing you
with a javascript api to inhibit page back & page forward.

------
emehrkay
It isnt the scrolling that "breaks the web," but the forward & back being two
finger swipes -- the same as scrolling.

I've made my forward/back three finger and spaces switch to four finger, seems
to work well.

~~~
deanproxy
I agree. Its the defaults they have. It is extremely annoying though... I
personally turn off that paging feature myself as it annoys the flip out of me
when I'm scrolling horizontally and because I like the rest of the defaults as
they are...

------
brown9-2
Why is it just OS X Lion? Snow Leopard has horizontal-scroll to go
back/forward in browsers also.

As someone who uses this gesture all the time I'd be _very_ annoyed if a page
hijacked the scroll to prevent my forward/back.

~~~
ConstantineXVI
The SL gesture used three fingers; Lion instead overloads two-finger scrolling
with back/forward. It's a bad move for UX since it's not immediately obvious
what's going to happen when you drag two fingers to the left/right (esp. since
Lion also killed scrollbars, leaving no indicator that there's content to be
scrolled).

------
haberman
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 _user_ wants or be left
behind.

FWIW I _like_ a lot of the UI change in Lion, natural scrolling in particular.

------
LogicX
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?)

~~~
adamjernst
He's using Chrome (see the screenshot). In my experience Chrome is much
quicker to interpret a horizontal scroll as a back/forward gesture; Safari
implements a good difference between them (as you describe).

~~~
toddmorey
I agree. I experience this problem a lot in Chrome and I've lost form data a
few times from it.

------
mikeryan
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 _good_
thing. Short term its going to cause some pain.

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.

~~~
rsl7
Consistency between gestures and the mouse is a terrible goal, absolutely
terrible because they're so different. The pinch to zoom and swipe to scroll
works well on iOS devices but it is horrible on track pads because of the
presence of a cursor. On a trackpad and a mouse you use your fingers to move a
cursor, not to swipe and gesture.

Maybe it's just me, but mouse gestures, swiping and scrolling are far too
easily activated. Take the worst offender in this area of all: Google. There
is no UI inconsistency worse, IMHO, than scroll to zoom on Google maps.
Absolutely atrocious. No matter how long I've used Google maps, I cannot seem
to stop myself from using the scroll wheel/swipe/whatever to move around on
the page, inadvertently zooming. Not only that, but the trackpads and Apple's
"magic mouse" are impossibly sensitive, scrolling, swiping, and gesturing
seemingly at random. How anyone uses these, I cannot say.

Must be me.

------
tomelders
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.

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.

~~~
Pent
Gestures are one thing, scrolling is another. To get a look at the immense
difference in usability, check out an app like flipboard vs feedly, one uses
vertical-scrolling and the other uses side-scrolling. I very much prefer the
vertical scrolling, but I won't speak for everyone, just giving an example to
try out.

------
heliodor
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.

------
chefsurfing
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 ).

Slicing apple with laptop video: <http://www.youtube.com/watch?v=rZvMlzVxQJE>

------
daleharvey
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

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

------
zackzackzack
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:
<http://imgur.com/sbZ4t>

------
ebbv
Change back/forward to three-finger swipe. Problem solved.

It should be that way by default, hopefully that changes in an upcoming patch
or 10.8.

------
benaston
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 :(

------
michokest
I just posted an update to the post with the screen we're showing (only once)
to "teach how to disable this".

I believe that's the best compromise: Keeping the scroll behavior, but
teaching you how to change it. <http://cl.ly/1R0T1Z1n2y160C1V3V0V>

------
seltzered_
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.

I recall the startupweekend website had this issue but they seem to have
redesigned around it.

------
emp_
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.

------
tomelders
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.

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.

That sort of behaviour might fix the issue. Although, perhaps fwd/back swiping
in OSX should only be three fingered by default.

------
Arelius
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.

In fact, I find it presumptuous that they are trying to even detect this, and
then tell the user to disable it system-wide!

------
alimbada
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.

------
frederico
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).

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.

This isn't OSX breaking the web...

------
alexwolfe
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.

------
benbeltran
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.

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.

------
jodrellblank
_If you want to prevent this, your options are limited._

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.

------
benmmurphy
I was going to check out their UI but trying to sign in with twitter gives
you:

Authorize Teambox to use your account?

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.

And for google:

The site teambox.com is requesting access to your Google Account for the
product(s) listed below.

Google Docs Google Calendar Google Contacts Gmail

wat?

~~~
yesimahuman
Did you read their feature list? It clearly integrates with those services as
part of their value proposition.

Honestly, I don't understand all of the API hate lately. People get upset when
you don't have OAuth or integrate with their existing services, and then they
get upset when you DO have it and it tries to integrate with your existing
services.

For a community that is supposed to support each other trying to innovate and
take risks, we've lately been really negative.

------
vegardx
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.

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.

------
pbreit
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).

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.

------
Bud
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.

~~~
gurkendoktor
The problem is that you cannot control what your users will do, and telling
them to change a system setting is not viable.

------
masylum
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.

I would love to see javascript hooks to this events so you could cancel this
behaviour programatically.

------
keeperofdakeys
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.

------
carlton
You can turn off the horizontal-scroll triggering Back/Forward in System
Preferences > Trackpad > More Gestures.

Set "Swipe between pages" to anything other than "Scroll left or right with
two fingers"

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

------
mnot
"Breaks the Web"? Really? Maybe you shouldn't be treating the Web as a pixel-
precise platform with a single control model.

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 _reasonable_ content.

If you want perfect control, go use Flash or Silverlight (and, thereby, die in
a fire).

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

------
gravitronic
Web works ok for me over here.

\- Linux/Windows user

------
gducharme
Anyone has a cache?

~~~
Zirro
It's still up for me.

~~~
Zirro
Why the downvote? It was never down, which means there was no need for a
cached-version. It must've been some local error for the original poster,
which was what I wanted to point out.

------
jsavimbi
> Teambox 4 is our newest release, and it’s awesome.

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.

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.

~~~
bradleyland
We try like hell to avoid horizontal scrolling. I hate it. It's especially bad
now that OS X hides scroll bars, so there is no visual indicator that you
_can_ scroll horizontally.

The issue for our application is that sometimes there's just too much data. If
I have a matrix of information that is 25 columns by 100 rows, I don't have a
lot of choices but to scroll horizontally. Drilldown is taken off the table by
the fact that the information must be available for quick cross-reference.

Our issue is not unique. Lots of people solving business process problems face
this issue, and I'm not aware of any good solutions. I'm ready and willing to
be educated though. Even if an alternate solution is harder, we're not afraid
of putting in the extra effort. We have a base set of requirements to meet
though:

* Must accommodate variable record counts in the x and y axis

* Must make data available for quick cross-reference (moving in and out of sub-screens to compare data is not acceptable)

* Must maintain the x and y axis relationship of data; that is to say, collapsing columns or rows is fine, but shuffling is not

We experimented with an option that collapses columns, but at some point, even
collapsed columns take up too much space. This means moving them out to a
separate "column selection" widget, which limits the maximum number of
selections and is even more confusing for users than horizontal scrolling.

Not an easy problem to solve.

~~~
jsavimbi
> The issue for our application is that sometimes there's just too much data.

If that's the case then you have either not executed proper information
architecture and design or you're trying to shoehorn a product into software
for which it is not suited.

Not everything can be translated properly inside of a web browser. It's a very
limited tool that has its uses, but beyond the basics it cannot compete with
native applications which can take true advantage of the OS and hardware along
with allowing the developer to circumvent many web conventions.

~~~
bradleyland
Gotta be honest, I disagree with just about everything you've said there, with
the exception of one part.

"...or you're trying to shoehorn a product into software for which it is not
suited."

I agree with the statement, but disagree with the context. If by software we
mean the display methodology, then yes. I take issue with the assertion that
this is a web browser problem though. We're basically talking about a pivot
table here. Large pivot tables often require horizontal scrolling. Moving the
pivot table to native software doesn't magically solve this problem.

This is an information representation problem. We're currently using a pivot
table. There is probably a better solution. I'll readily admit that I don't
see it, and that's _my_ deficiency. I cannot see that this is a problem
inherent to web browsers though.

~~~
jsavimbi
Because you're looking to display it in a web browser. A PC may not be the
most suitable platform. Not everything works correctly on one nor can
everything be adapted to the context of a browser. It may just be that simple.

------
leon_
make native apps and stop doing that web bullshit then?

