iOS problem. What is happening? Why? How do I prevent it? (html5 widget dragging mobile)

Mobile
1

Hi there,

Any help would be appreciated. I’m having trouble with finding the solution because I don’t know the word for what is happening here.

Here is the link (https://dl.dropboxusercontent.com/spa/x6y50ds09e9eu1u/Exports/mobile_form/mobile_form.html)
mobile_form.hype.zip (48.8 KB)

I’m working on a project that uses an embedded youtube video in an html widget.

For some reason, when I look at the page on my iPhone, the video can be dragged around a bit and does a rubber band sort of effect.
It can take a few tries to make it happen. I noticed it’s easiest if you try to swipe up on the video, then you can wiggle the video up and down instead of scrolling the page.

This interferes with scrolling through the rest of the page.

I want to make the video stay in place, make in unable to be moved.

Possible search terms:
rubber band ? scroll ? swipe ? touch ? iframe ? * momentum *

2

Hi @a_brougher, I took a look at your hype document and it looks like the html code you’ve embedded does not match the iframe size in the metrics tab. try matching those to what your embedded code says and give it another shot in preview mode.

Regards,
techgiant2000

2 Likes
3

Ive noticed that issue when using html widgets as well. That is because the element is an iframe and when your drawing it its trying to scroll… an alternative solution that i find to work much better would be to insert a shape i.e. rectangle and edit its inner html crate a div and enable your video there. You end up achieving the same goal and from my experience get much cleaner results.mobile_form.hype.zip (28.7 KB)

3 Likes
4

Howdy, If you want the video to stay in one position you could use some CSS...

Give the HTML Widget a Unique Element ID in the "Identity Inspector" (I used 'vid'), and put this in your Head HTML in Hype from the "Document Inspector"

<style>

	#vid {position:fixed !important}

</style>

I could not reproduce your 'rubber banding' issue on my iPad Air.

2 Likes
5

This solution works! Thank you!

Anyone know what’s going on behind the scenes there? Why JohnnyMoon’s solution works?

I still don’t know what that iOS dragging and rubber banding is called or how to search for it. I noticed the dragging thing occurs on android too but with no rubber banding.

6

We set -webkit-overflow-scrolling: touch; on HTML widgets, which makes scrolling easier on iOS devices for both regular elements like rectangles with scrolling and iframes. For some reason even if there is no ‘overflow’ (your video fits well within the area) the frame is allowing itself to be scrolled.

Here’s more info: https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/

1 Like