Php photo gallery TWG | JFUploader | TWG Flash upload | WFU | Forum
https://www.tinywebgallery.com/forum/

Input not responding correctly after resize
https://www.tinywebgallery.com/forum/viewtopic.php?f=21&t=3853		 Page 1 of 1
Author:  marcverkade [ 29. Apr 2015, 20:14 ]
Post subject:  Input not responding correctly after resize
Hai Michael,

Sorry to bother you again but I am still struggling with the plugin and have 2 issues which prevent me from launching my webshop integration in WP.

1 When I try to enter text in an input at the page http://www.mitcon.cw/index.php/extravestiging-login/ on an iPhone 4s, the cursor blinks somewhere else in stead of where the input is located, i guess it blinks at the original position of the input. This works correctly in a browser (chrome / safari) on my computer but not on my iPhone. See attached image where I click and where the cursor starts blinking

2 When you open the same page http://www.mitcon.cw/index.php/extravestiging-login/ and make the browser smaller, the iFrame resizes correctly, but, when I type something in one of the input controls at the right side, the iFrame starts moving to the left. I recorded what happens at http://www.extravestiging.nl/download/iFrameInput.mp4
Update: When you do not resize the iFrame, the website in the iFrame is panned when you type in an input that is not/partly visible. So I guess this also has something to do with the fact that the iFrame thinks that the input is not visible (while it is completely visible) after resizing and tries to pan the webpage in the iFrame to show the input you are typing in...

Any clue what is causing and prevent this behaviour?

This is the Shortcode i am using now:
[advanced_iframe securitykey="mykey" use_shortcode_attributes_only="true" src="http://www.mitcon.cw/webshop/SignOn.aspx" width="100%" height="600" scrolling="no" id="EVWebshop" name="EVWebshop" auto_zoom="same" onload_resize="true" onload_resize_delay="200" enable_responsive_iframe="true" hide_page_until_loaded="true" show_iframe_loader="true"]

regards, Marc

Attachments:
iFrameInputIphone.png
iFrameInputIphone.png [ 128.06 KiB | Viewed 2851 times ]
Author:  TinyWebGallery [ 29. Apr 2015, 20:51 ]
Post subject:  Re: Input not responding correctly after resize
what are the settings?

1. I think you have to send apple an e-mail. I don't see how this can be fixed with the iframe.
2. Maybe to input is not visible 100% and therefore it switches than. I the page that wide?

Best, Michael
Author:  marcverkade [ 29. Apr 2015, 21:08 ]
Post subject:  Re: Input not responding correctly after resize
Hai Michael,

With 1 I can live since I guess it will work on other devices (i checked Samsung S5) or updated iPhones.

With 2 however I cannot. The webpage/iframe is zoomed/resized using the right shortcodes so the control fits in the viewing area... The iFrame should not pan the site...
Have you checked the page and have seen it happening yourself?
This behaviour happens in browsers but also on other devices like iPhone and Android mobiles when the iFrame resizes.
Any clue why this is happening? You have never experienced this?

I understand that you are getting fed up with these strange things happening to me but businesswise I really want to make this working.
Thanx again for your help and effort.

Regards, Marc
Author:  marcverkade [ 29. Apr 2015, 22:01 ]
Post subject:  Re: Input not responding correctly after resize
Hai Michael,

It is getting very weird.... The iFrame itself is moving out of its container when you type in an input-field in the webpage of the iFrame.
Check the video at http://www.extravestiging.nl/download/iFrameMovesOutofDiv.mp4

When i uncheck overflow:hidden, the iFrame is positioned in the center again.
After typing, it moves but by checking/unchecking overflow:hidden, the iFrame is viaible again...

I really do not understand why this is happening...
Do you have a clue?

Regards, Marc
Author:  TinyWebGallery [ 29. Apr 2015, 22:24 ]
Post subject:  Re: Input not responding correctly after resize
I just "fixed" this in chrome by changing some styles. Can you please try to remove the loader icon.
show_iframe_loader="false".

I want to see if the combination is the issue.

Best, Michael
Author:  marcverkade [ 29. Apr 2015, 22:30 ]
Post subject:  Re: Input not responding correctly after resize
Hai Michael,

I fixed the panning of the iFrame when typing in an input by setting the position attribute in the child CSS: #EVWebshop { position: absolute; }

Perhaps something to add in your 'workaround' manual.

Regards and thanx again for your effort, Marc Verkade
Author:  TinyWebGallery [ 29. Apr 2015, 22:39 ]
Post subject:  Re: Input not responding correctly after resize
have you already added that? because I don't see it. My fix was different. I removed the overflow:hidden and placed it on one element higher in the dom.

but adding the position:absolute in case of zoom is also good. I'll test this with my demo if I have a difference here.

Best, Michael
Author:  marcverkade [ 29. Apr 2015, 22:52 ]
Post subject:  Re: Input not responding correctly after resize
Hai Michael,

I was testing on another domain so I would not interfere with your investigation.
I have added the attribute to the CSS at http://www.mitcon.cw and the iFrame is stable there too.

I can test your adjustments if you want... Just let me know what you want me to change.

Regards, Marc
Author:  marcverkade [ 25. May 2015, 22:13 ]
Post subject:  Re: Input not responding correctly after resize
Hai Michael,

The sites when zoomed on the same domain are working ok.
When zooming external, the iFrame is also out-of-bounds and not at the right spot.
I have been examining this and found a workaround which works for me (changed the width of AI_WRAPPER_DIV), but perhaps you have some better clue why th iFrame is out-of-position?
See attached 2 files (png and jpg) explaining what I mean.

Regards, Marc

Attachments:
Copy of AI-02.png
Copy of AI-02.png [ 43.86 KiB | Viewed 2802 times ]
Copy of AI-01.png
Copy of AI-01.png [ 154.97 KiB | Viewed 2802 times ]
Author:  TinyWebGallery [ 27. May 2015, 20:50 ]
Post subject:  Re: Input not responding correctly after resize
The problem is always that every site has different html/css and I used a default that worked for many of my tests.
I will keep your solution as possible backup.

In version 6.4 I already have a parameter additional_styles_wrapper_div at this place to add custom code.
Can you try to add
;overflow:auto;
at this point? because this was a fix also.

Best, Michael
Page 1 of 1 All times are UTC + 1 hour [ DST ]
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/