Problem with scrolling webbrowser or iframe in iOS

1
0

Hi – we are having trouble in one of our projects where we have to display some content in either an iFrame panel or a web browser control.

Works great on desktop, but on mobile iOS/safari there is a problem. No matter what we do – we cannot get the content displayed in the iframe panel or the webbrowser control to scroll, and of course we have to have that.

I think this might be an iOS safari thing, as there are lots of people talking about solutions to this:

Scroll IFRAMEs on iOS

https://coderwall.com/p/c-aqqw/scrollable-iframe-on-mobile-safari

We tried to attach styles using the stylesheet control and also tried to attach some style using .Eval but we didn’t have any success.

Attached is a project that displays a webbrowser control, and if you look at this using iOS safari it won’t scroll.  Is there something you fine folks at WiseJ can do about this, or do you have a work around we can use?

We can use iFrame or webbrowser – preferably the iFrame panel.

Thanks in advance,

 

Matthew

 

 

 

 

 

 

 

  • You must to post comments
0
0

Thank you Luca – I appreciate your time spent on this.  We will see if we can make the htmlpanel approach you have above work for our needs.

Thanks very much.

  • You must to post comments
0
0

Tried this and there it no way to get to something that works consistently. The only solution that seem to work doesn’t let  you set the size of the iframe breaking web sites that are instead designed to resize. And it ends up showing two scrollbars when on a desktop. I tested this simply with html, so it has nothing to do with Wisej.

The only solution that works is to use an HtmlPanel and create the html that works for the site and size you want to show. The HtmlPanel or any other solution cannot even measure the content of the iframe because the browser blocks any access. See this test:

http://demo.wisej.com/iframetest

It resizes the content horizontally on a desktop. And it scrolls on an iPhone. I used this HTML in an HtmlPanel with ScrollBars set to None:

 

   <div 
        style="width:600px;height:500px;overflow:auto;-webkit-overflow-scrolling: touch">
        <iframe src="http://jquery.com" frameborder="0" scrolling="yes"
            style="width:100%;height:calc(100% - 4px);overflow:auto !important;">
        </iframe>
    </div>


You have to “burn” the size in the html. Notice also calc(100% – 4px) because somehow chrome shows the vertical scrollbars on the container within 4 pixels. There is really nothing else and everyone seem to have the same problem.

  • You must to post comments
0
0

Any help on this issue?

  • Luca (ITG)
    Not yet. Should be able to have a solution soon.
  • Matthew Ferry
    Thank you Luca!
  • You must to post comments
Showing 3 results
Your Answer

Please first to submit.