Develop Reference

Scaling iframe to make it responsive is not working well with touch devices

I have a responsive website WebsiteA, and I'm opening another responsive WebsiteB using an iframe.
I needed to make the iframe responsive as well (to take the full width and height of it's container div), so I did that with absolute positioning.
This is working fine in the browser, I can resize the screen and the iframe is behaving in a responsive manner, and I'm still able to interact with WebsiteB inside the iframe normally, like clicking the links, buttons ...etc
But once I use a device emulator (in chrome dev tools), or use an actual touch device (mobile, tablet), when I try to touch any of the controls (links, buttons ...etc) in the iframe (WebsiteB), then it seems that the touch events are being received at the wrong location, Therefore event handlers are not working.
Has anybody encountered this issue?

How to prevent Chrome on Android from auto-scaling the page?

I have a web app which can display images at various sizes. One selection is to scale up to the size of the screen (and then scroll to it so that nothing else is visible). When I do that, the browser automatically zooms out to fit the entire image plus the rest of the page. How do I prevent that automatic scaling, while still allowing the user to zoom in and out?

Display rotates before browser orientationchange fires

I have two distinctly different presentations of a page, depending on landscape or portrait orientation. The first img on that page is assigned (via javascript) a landscape or portrait proportioned src depending on the orientation. This works on Safari, Chrome ,Firefox on all test desktop machines (Windows/Mac), all tested Android devices using Chrome or Firefox, and IOS iPads - where it breaks is on iPhone 5/6 (probably 7).
In the .ready javascript code I blank the page using $("body").css("visibility","hidden"), do my formatting, set the "src" of the image to portraitformatpicture.jpg or landscapeformatpicture.jpg and then renable the screen with $("body").css("visibility","visible").
This method actually works in all instances - rotating the device causes the screen to go blank, after which the properly orient image appears.
The issue is only on IOS Safari on iPhones - when the device is rotated you see the current page displayed in the new orientation, with the other (previous) orientation's image displayed. You see the new orientation displaying the page flipped sideways for "a while" (100s of milliseconds) at which point the "orientationchange" event fires in the browser, allowing the javascript to run, which correctly switches the image and formatting.
So the problem isn't that the orientationchange event doesn't occur, it's that the page is visible before any of the orientation-specific logic has had a chance to run.
How have any other folks addressed this? There is no notification that I'm aware of that can inform the javascript that a screen orientation change is imminent, only that one has already occured...

iOS visual flash when altering page length / scrollbar

http://jsbin.com/nesiside/1 (code is available http://jsbin.com/nesiside/1/edit)
If you scroll down in the document and click the "Lock/Unlock" button, an overlay with text will appear. You'll notice that the scrollbar length has been changed to accommodate the overlay height, not the original page height. Click "Unlock" in the overlay, and you return to the original page, in the previous scroll position.
System works great on desktop browsers, and on my Android phone, however, on iOS there is a rendering flash flash when the overlay is triggered or removed. Ultimately, I believe it is the fault of the scrollbar changing.
I've attempted the usual tricks to resolve iOS rendering issues (webkit-backface, transform3d), with no success.

Apparently, showing the content and hiding the overlay (or vise versa) was to much for the iPad 4 to render at once, causing the flash. This is odd because I tested it on an old Kindle and my Android phone and both are handled it fine with their slow processors.
To resolve the issue, I put the the scrollTop() method (used to return the user to the previous position on the underlying page) inside a requestAnimationFrame function. The result isn't perfect (content can be screen scrolling for a fraction of as section), but it is a much better result than an entire page flash.

Cannot scroll web page on iPad

On iPad I cannot scroll a web page. It works fine in Safari, Chrome and Firefox on OS X.
The page has an area in which content can be scrolled only horizontally. It consists of a container div which has width = 100% and height = (100% - 40px). I am setting the height by a JavaScipt function which is triggered by window resize events. Inside this container is another div with the width of the content (very wide, to avoid line breaks). Inside that is the content.
CSS properties of the container are:
overflow-x:scroll;
overflow-y:hidden;
white-space:nowrap;
See the page and full source code here: dcfoto.de
On iPad, scrolling is not possible. What am I doing wrong?
By the way: resizing also does not work properly on orientation change. Maybe that's connected.

Unfortunately a two-finger swipe needs to be performed, and even then it is not responsive (when compared to the default one finger swipe scroll).
There are quite many javascript solutions out there, (sencha touch and iscroll being the most promising and advanced)
I would recommend http://cubiq.org/iscroll-4 which is hands down the coolest touch-scroll script out there. It also works for android, but quite more sluggishly since the default android browser albeit webkit based doesnot support css3 3d accelerated properties as good as the mobile safari one.
If I were you I would check for the user agent of the user, and deploy that script for android and ipad/iphone users.