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?
Related
I have an android app that uses webview to render large images in a div. The div has fixed width height to match the screen leaving some area on top for controls. The image has an image-map on it and areas created with links.
Now the issue is that when I drag the image from non-mapped areas, it works fine, but when I drag from mapped area, it does not work and I think stucks in the touch event (because I also see the orange focus border on the image map area that opens links).
This happens only when the page is run from within app+webview, but if I load the page in browser on same mobile, it works fine.
Also this does not happen in my Android 5.1 Vega IRON, but it happens in older phones like Android 4.4 Droid, and same version Huawei.
Is this some known issue?
This might have something to do with touch events in application, as it works in browser but not in application.
I found out that in some conditions, the image-map does not let the mouse button events go past, therefore it does not perform even the default dragging and click behavior.
I had to remove image-map and build my own absolute positioned and display:block <a> tags for each area, and then it worked.
Hope this helps someone.
I'm working on a some-what basic site, but have an issue we can't seem to get passed. (site not complete)
It's a horizontal size, laid out using fullPage.js.
https://github.com/alvarotrigo/fullPage.js/
When you click the Sign up button in the top right corner, the slide container scrolls all the way left, displaying an iframe, loaded with a CRM.
We're using a callback in the fullPage plugin to know when a user has scrolled to that page. When the page with the iframe is loaded, a script runs to resize the height of the iframe to the available screen-estate ( win height - header & footer ).
Problem is, scrolling doesn't work on Iphone. Works fine on desktop.
Can't seem to figure out what's going on. Have read up on scrolling in iframes on iOS devices, but haven't stumbled upon a viable solution.
url: go-combine.com
Thank you in advance for your help.
I'm making a small full-screen canvas game to be played on mobile. It involves swiping around the screen with your finger. I have the canvas listening for touch events (down, move, up).
Unfortunately, the browser tries to interpret swipes left and right as browser tab navigation, and swipes up and down as hide/show URL. I don't care if the URL is hidden or not, I just want everything to stay still.
As a result of everything moving, it intermittently stops recognizing inputs to the canvas.
The way I have it set up is a canvas that takes the size of the screen, set its position to fixed at 0,0. This is to prevent scrolling (which works, except for the hide/show url thing).
If you want to see an example, here's where I'm hosting it:
http://phildogames.com/scratch/sust/index.html?game=window (you won't be able to interact on desktop because it's listening for touch events, but if you view it on mobile you should be able to open and close the windows).
tl;dr: I want to tell the browser to simply pass swipes (well, all touch events) to the dom and stop interpreting them as intents to scroll, switch tabs, hide/show URL, etc..
Thanks!
I was able to solve your problem by simply preventing touches on the body.
var myBody = document.getElementById('dabody');
myBody.addEventListener('touchstart', function(e){
e.preventDefault()
});
You can throw that in console to test. Tested on iOS Safari and Android Chrome.
Mobile Safari is not rendering images on our HTML5 website. These images are added dynamically via JavaScript.
We have tried the suggestions from these places, but none work for us:
How can I force WebKit to redraw/repaint to propagate style changes?
Webkit box-shadow gitches on top of the other elements
http://mrdarcymurphy.tumblr.com/post/5574489334/force-mobile-safari-to-repaint-redraw
The only things that cause the images to get rendered are if we either ask the user to turn the device orientation to landscape, or if we show a JavaScript alert. Once the user dismisses the alert modal, the images get rendered.
Steps:
1) Visit Tekiki.com on your iPhone. Make sure Wi-Fi is disabled (happens less consistently with Wi-Fi).
2) Tap on one of the apps. Images (app screenshots) on the bottom of the page will only appear if you turn the device sideways.
What else can we do to force WebKit to repaint/paint these images?
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.