Colorbox content not scrolling on mobile safari

Good Evening,
I created a website using the thickbox where it displays a calendar and one of the problems that has surfaced is the content will not scroll on iPhone type browsers. I have tried to update it to the colorbox and see if that fixed the problem and it did not.

How do I get the mobile browser to allow content to scroll?

Here is a page that I have been using to try and figure the problem out:



With thanks to Jack Moore, the colorbox css file has been updated to address this:

#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}

Amending your stylesheet with the webkit specific overflow rule should do the trick. No need to update any javascript function.


This appears to be a limitation of the mobile version of Webkit.

This page claims you can work around it by two finger scrolling within regions with overflow:scroll set. I've not been able to try this out for myself though as I've not managed to get hold of the company ipad to test it.

If anyone happens on this answer question, please see my answer on this very question on another thread. Note that you need to control the iframe contents i.e. on the same domain.

Category:browser Time:2011-01-10 Views:1

Related post

  • Events for Inertial Scrolling on Mobile Safari 2012-03-22

    I am currently using overflow:scroll on a web page optimized for the iPad, and it works great. I began running into trouble with touch events on the items in the scrolling div, because it was interpreting the scrolling swipes as touches. Since there

  • jQuery scroll on Mobile Safari 2010-05-25

    I'm developing and website and I need it to scroll to an anchor. It needs to be animated, so I decided to use jQuery for that. I tried this: function goToByScroll(id){ $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow'); } It works per

  • Difference between content in uiwebview and mobile safari? 2012-03-14

    I am showing a twitter feed in a uiwebview... however there is a problem: it appears significantly differently in the uiwebview then what it does in mobile safari. Ultimately, I much prefer the look of the feed as it is shown in mobile safari. Is the

  • Capturing single finger scroll for iframes on mobile safari 2010-11-09

    Is it possible to have an iframe capture the standard (single-finger) scroll on mobile safari? I have a javascript application that creates a large iframe intended for scrolling. It works great an standard web browsers, but requires the unintuitive t

  • how to properly display an iFrame in mobile safari 2011-03-11

    I'm trying to display an iframe in my mobile web application, but I'm having trouble restricting the size of the iframe to the dimensions of the iPhone screen. The height and width attributes on the iframe element seem to have no effect, strangely. S

  • Single finger Scrolling for inner contents (div/iframes) in iPhone Mobile Safari 2011-05-07

    Sub: iPhone mobile safari web application I need to keep some parts of a web page visible even when a user scrolls. The CSS property position:fixed does not work as expected. Using the overflow:auto property on or needs two-finger scrolling which is

  • Scrollable Content areas on Mobile Safari 2010-06-26

    I'm developing a web app for iOS devices, and want to have a header that stays on the top, and then two scrollable content areas underneath it, kind of like Gmail's iPad interface and the iPad split-view apps. Does anyone know how? I've looked at htt

  • Why Does Mobile Safari Trigger :active State during scroll? 2010-12-28

    Currently testing mobile site on iOS (will get to other devices soon, so unsure if this pertains to other OS's/Browser). How come mobile safari triggers the active state of a link during scroll? My test page is constructed of an unordered list with a

  • Mobile Safari Viewport - Preventing Horizontal Scrolling? 2011-04-04

    I'm trying to configure a viewport for mobile Safari. Using the viewport meta tag, I am trying to ensure that there's no zooming, and that you can't scroll the view horizontally. This is the meta tag I'm using: <meta id="viewport" name="viewport"

  • Mobile Safari like scrolling of UIWebView (with navigationbar stuck at top) 2011-06-01

    How would I go about making a browser window that has the same scrolling properties as Mobile Safari? If you scroll Mobile Safari the navigation bar up top follows with it. If there is no more content it stops scrolling, and it has a very special way

  • Mobile Safari: Disable scrolling pages "out of screen" 2011-10-31

    I want to block scrolling page "out of the iPhone screen" (when gray Safari's background behind the page border is visible). To do this, I'm cancelling touchmove event: // Disables scrolling the page out of the screen. function DisableTouchScrolling(

  • Prevent sideway scroll of site in mobile safari 2011-11-09

    I have a website based on jQuery Mobile. I'm using the viewport tag to fit my site to screen size. So far so good. <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> But the Problem is now, that I'

  • Hide address bar in mobile Safari when scrolling (touchOverflow) 2012-03-22

    I want to kind of continue some other Question: How does jquery mobile hide mobile safari's addressbar? this hides the adressbar after page is loaded. But, here my new question: if i scroll up to reshow the adressbar, the adressbar doesn't hide when

  • Mobile safari: window.pageYOffset / scrollY seemingly ignores navigation bar height even though it scrolls 2011-01-12

    So I have setup a scroll listener: window.onscroll = function (){ alert(window.pageYOffset); // have also tested with window.scrollY } And, as expected, I get my alerts once scroll is complete. I have the debug console, turned off for this as well, s

  • Scroll in a PDF in an tag in mobile safari? 2011-05-25

    Is it possible to scroll a PDF embedded with the <object> tag in mobile safari? --------------Solutions------------- try 2 fingers. That works on iframes so it should do it on objects. If this does work you will have to work with touchstart jav

  • Scrolling pages with multiple scroll bars in mobile Safari 2011-08-17

    I've a page, where in I've multiple scroll bars inside s. When I access it from mobile safari, I'm not able to scroll through the <div> s. Is it the default behavior? I know that it is possible to fix it (using Dojo/jQuery). But I just wanted t

  • Facebook app request dialog height extends well past canvas content height in mobile Safari 2011-12-16

    We are using the following code to generate a Facebook app request dialog in our Facebook canvas app. var options = { method : 'apprequests', message : 'MESSAGE', title : 'TITLE'}; FB.ui(options, function() {alert("called back");}); When we make this

  • Scrolling site doesn't work in Mobile Safari? 2011-12-24

    I have a single-page scrolling website. It uses a fixed-position nav bar with jquery to scroll to different sections of the website. The site works fine except for on the iOS (I haven't tested it on Android). On iOS, after clicking a link, the naviga

  • Prevent mobile safari from scrolling page when textarea focused 2011-12-25

    As the title suggests, I need a workaround to prevent mobile safari from scrolling the document when a textarea is focused. The default behavior is to scroll the page so the textarea's top is aligned with the top of the window. I just want my page to

Copyright (C), All Rights Reserved.

processed in 0.450 (s). 13 q(s)