Results 1 to 3 of 3

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

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

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


    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):

    	xtype: 'tabpanel',
    	config: {
    		listeners: {
    			activeitemchange: function(source, value, oldValue, eOpts) {
    				if( == 'promo') {
    					setTimeout(function() {
    					}, 400);

  2. #2
    Sencha - Support Team
    Join Date
    Oct 2011


    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:
    I would suggest searching the forums.
    Get more personalized support via a support subscription.

    Need more help with your app? Hire Sencha Services [email protected]

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

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

  3. #3


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

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts