Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    marco.marsala
    Guest

    Default -webkit-overflow-scroll inside iframe in a tabPanel breaks scroll in other panels

    -webkit-overflow-scroll inside iframe in a tabPanel breaks scroll in other panels


    Hi.

    I tried to place an iframe (display:block; width: 100%; height: 100%) inside a tab of a TabPanel (say this tab id = "promo"). The page loaded inside the iframe contains a div with -overflow-y: auto to enable scrolling on that div, and -webkit-overflow-scroll: touch to enable native scrolling.

    It works, but when you switch to another tab of the TabPanel (imagine a classical "More" tab), and that tab contains a NestedList, some elements aren't clickable (unless you reorient the device).

    I fixed this by listening on activeitemchange event of the tabPanel, to detect when user is leaving the tab "promo", containing the iframe, and applied this code to force a redraw (completely solves the issue):

    Code:
    ...
    {
    	xtype: 'tabpanel',
    	config: {
    		listeners: {
    			activeitemchange: function(source, value, oldValue, eOpts) {
    				if(oldValue.id == 'promo') {
    					setTimeout(function() {
    						document.getElementById('promo_embed').style.display='inline-block';
    						document.getElementById('promo_embed').offsetHeight;
    						document.getElementById('promo_embed').style.display='block';
    					}, 400);
    				}
    			}
    		}
    }
    ...

  2. #2
    Sencha - Support Team
    Join Date
    Oct 2011
    Posts
    3,928
    Vote Rating
    129
    fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all

      0  

    Default


    Thanks for the report. Unfortunately Touch does not support the use of iframes. With that said there are quite a few forum posts with suggested workarounds on this issue.
    For example: http://www.sencha.com/forum/showthread.php?237527
    I would suggest searching the forums.
    Get more personalized support via a support subscription.

    Want to learn Sencha Touch 2? Check out
    Sencha training
    Sencha Touch in Action

    Need more help with your app? Hire Sencha Services services@sencha.com

    When posting code, please use BBCode's CODE tags.

    Need to include a test case use:
    The official Sencha Fiddle

  3. #3
    marco.marsala
    Guest

    Default


    Forgot to mention my solution requires <embed> or <object>

Thread Participants: 1

Tags for this Thread