11 ms·
Mac OSX Lion's scroll breaks the web
- trotsky 15y agoI’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.
- jws 15y agoSounds 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 15y agoNot 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.
- willyt 15y agoIt alerts you if you have typed stuff and try to go back
- rayiner 15y agoThe 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 15y agoCertainly, 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.
- __david__ 15y agoYou say that, but the gesture has caused problems on our site that features no horizontal scrolling and no dynamic history stuff. Witness: http://forum.greenfelt.net/viewtopic.php?f=2&t=1268 in which a user doesn't understand what is happening and one of the devs heroically guesses the cause of his symptom.
- zackzackzack 15y agoMinor 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 http://imgur.com/sbZ4t
- helipad 15y agoIt'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.
- blindhippo 15y agoHorizontal scrolling is a pain in the rear and I hope most web developers stay away from it entirely. I can't think of any good reason any web page should ever scroll unless your monitor is smaller then 1024px.
- secoif 15y ago> I can't think of any good reason any web page should ever scroll… They give you a very good reason why the webpage should horizontally scroll: task boards. I've implemented and used task boards before and hit this exact same issue. Horizontal scrolling is only really an issue for those users who don't have a decent device for horizontal scrolling. On trackpads and the Magic/Mighty mouses, horizontal scrolling is very natural.
- vacri 15y agoThis is a much underrated point - side-swiping fingers is easier than vertical-swiping them.
- blindhippo 15y agoWhat is a "task board"? "Horizontal scrolling is only really an issue for those users who don't have a decent device for horizontal scrolling" Then why are you developing applications that likely an issue for most people?
- tomelders 15y agoI'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/ http://www.apple.com/mac/
- gducharme 15y agoAnyone has a cache?
- emehrkay 15y agoIt 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 15y agoI 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 15y agoWhy 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 15y agoThe 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).
- vegardx 15y agoYou 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.
- tomelders 15y agoI 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.
- flyosity 15y agoCan 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.
- tomelders 15y agoit's easy with a trackpad though. And on a touchscreen.
- Symmetry 15y agoAnd a with a trackpoint.
- kristofferR 15y agoHow? Since a trackpoint can't possibly support two-finger scroll, which is what makes scrolling both directions so easy on a trackpad, it seems like you either would need to drag the scrollbar block or hold down a key in order to scroll, two cumbersome solutions.
- Symmetry 15y agoYou just hold down the middle key and push the trackpoint. Since its right by your thumb anyways, it really isn't cumbersome at all. And I find it much easier and more precise for scrolling long distances than either trackpad or screen scrolling since I only have to hold something down, and releasing it stops the scrolling instantly.
- daleharvey 15y agoThats a pretty ridiculous solution, the web is not limited to reading plain text documents anymore, there are a lot of applications where horizontal scrolling is perfectly suitable requirement. Imagine drawing apps that could only handle a fixed width, or spreadsheets where you could only go as far as the F column
- jsavimbi 15y ago> 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 15y agoWe 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 15y ago> 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.
- benbeltran 15y agoI 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.
- emp_ 15y agoHorizontal 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.
- michokest 15y agoI 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 http://cl.ly/1R0T1Z1n2y160C1V3V0V
- api 15y agoI 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.
- Derbasti 15y agoI don't know man. You sound like you just don't like new stuff. That said, I am not very excited about many pieces of the Lion UI either. Inertial scrolling is amazingly useful, though. Also, I quite like the 'Ribbon' in Office. Much better discoverability than all those hundreds of menus beforehand.
- deong 15y agoI can't speak for the parent, but personally, I just don't like awful new stuff. My iMac has a 27" display and a fairly expensive set of peripherals. It's not an iPad. In their efforts to make it into one, they broke nearly everything they touched. Scrolling that can't be set up the way I want it (without third party utilities), scroll bars that hide useful information in order to save 0.04% of screen real estate, full screen windows that are almost always massive overkill, but can't really be ignored because to implement them they had to break useful functionality in Spaces. The list goes on, well, not quite forever, but the list of stupid ideas in Lion is to a first approximation, the same as the list of ideas in Lion. The single greatest improvement I've seen in the time I've had my iMac was when the hard drive died and it came back with Snow Leopard without me having to spend the time to downgrade it myself.
- Derbasti 15y agoSee, I don't really agree with that. Yes, fullscreen is worse than useless on more than one monitors. But you don't have to use it. Fullscreening an app on a big monitor was never very useful in the first place. But as I said, inertial scrolling is great. Spaces are great. The gestures to navigate spaces are great. All that Versions and Autosave stuff is atrocious. But I rarely stumble into it since I mostly use Emacs. I really like the non-existent scrollbars. I don't miss having those ugly grab-bars on every window one bit. All things told, I'd rather have Lion than Snow Leopard, but really only by a small margin.
- tomelders 15y agoThere'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 15y agoGestures 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.
- carlton 15y agoYou 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"
- masylum 15y agoLots 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.
- Bud 15y agoOh, 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 15y agoThe problem is that you cannot control what your users will do, and telling them to change a system setting is not viable.
- LogicX 15y agoDo 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 15y agoHe'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).
- lloeki 15y agoAlso, Safari gives progressive feedback on the action and releasing it before halfway cancels the move, whereas Chrome has it instant. IMHO if anything this is a Chrome implementation issue, not a OS X issue.
- toddmorey 15y agoI agree. I experience this problem a lot in Chrome and I've lost form data a few times from it.
- stephenr 15y agoDon't bash chrome too loudly, you'll be down voted like a monkey with rabies at a kids birthday party. Dont you know google is every single developers favourite company and they can do no wrong? It's clearly not googles fault for copying a feature in a half-assed manner, it's apples fault for not predicting that would happen and abandoning the feature.
- daleharvey 15y agoI 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
- benmmurphy 15y agoI 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 15y agoDid 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.
- cobralibre 15y agoWith 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.
- r00fus 15y agoGmail auto-saves your content, JIRA should do the same (or have an option to). The Safari back "feature" is not much worse than closing a window, browser crashes or OS crashes - stuff happens, a simple modal to prevent loss isn't adequate. I'm not trying to diminish the complaint of the posting (which is valid) but web-apps should really capture "intents" as new stored data. If I intend open a new ticket, a new record should be automatically be created regardless, and then marked "deleted" if I abandon it (which could be reversed later).
- X-Istence 15y agoWhen 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 15y agoTrue, 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.
- alimbada 15y agoOne 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.
- benaston 15y agoOverloading 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 :(
- daniel_sim 15y agoDoesn't event.preventDefault() cater to this case?
- frederico 15y agoThis 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...
- eykanal 15y agoTo 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&tstart=0 https://discussions.apple.com/thread/3192014?start=0&tst...) and bloggers (http://www.tuaw.com/2011/08/02/baffling-inconsistencies-in-os-x-lion-multi-touch/ http://www.tuaw.com/2011/08/02/baffling-inconsistencies-in-o...). 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 http://stackoverflow.com/q/8737709/168775 I have no idea if it works. Good luck!
- stephenr 15y agoThe problem isn't apple or safari. Chrome copied a safari feature poorly, THAT is the problem.
- mikeryan 15y agoI dont' think thats correct. This occurs in Firefox as well.
- ugh 15y agoThen Firefox also copied poorly (wouldn’t surprise me). It’s a bug in Firefox and Chrome, nothing else.
- stephenr 15y agoI'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".
- ebbv 15y agoChange 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.
- mikeryan 15y agoThis 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 15y agoConsistency 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.
- pbreit 15y agoThe 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.
- Arelius 15y agoAm 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!
- gravitronic 15y agoWeb works ok for me over here. - Linux/Windows user
- heliodor 15y agoThis 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 15y agoWe 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 http://www.youtube.com/watch?v=rZvMlzVxQJE
- haberman 15y agoI 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.
- seltzered_ 15y agoI'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.
- mnot 15y ago"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).
- alexwolfe 15y agoI 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.
- keeperofdakeys 15y agoIn 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.
- bryanw 15y agoBreaks the web? You mean breaks your site, I am still happily browsing 99.999% of other websites.
- leon_ 15y agomake native apps and stop doing that web bullshit then?
- jodrellblank 15y agoIf 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.