iframe problem for ios

Started by federer007, June 17, 2015, 02:58:26 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

federer007

hello i add iframe keyshot but it's not  compatible for ios , on the other smartphone it works very well
http://www.swissprogress.ch/visualisation-interactive-en-3d

Josh3D

Hi, please replace with this code and remove your iframe css. Let me know if this works for you!

<div style="left: 0px; width: 100%; height: 0px; position: relative; padding-bottom: 62.45%;">
<iframe src="http://www.swissprogress.ch/montre_VR.2/montre_VR.2.html" frameborder="0" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute;"></iframe></div>

Brandon Davis

To add make sure you've set the scrolling to be "no".scrolling="no"

Looks like you have set this value to be "yes".

federer007

thx for reply , i tried  what you said , but it's still the same problem , also for ipad  :(

Josh3D

Hmmm, can you sent the KeyShotVR file zipped up to josh@luxion.com using keyshot.wetransfer.com? I'll have a look and test. Thanks.

rosst

I encountered a similar issue in my pursuits.  Solution was to set the width and height of the frame to 1px and then set the min-width/height to your desired values.  Here's my css class for my embedded iframe:

.modelFrame {
    margin: 0;
    padding: 0;
    border: none;
    resize: both;
    overflow: auto;
    width: 1px;
    min-width: 300px;
    height: 1px;
    min-height: 150px;
}

Best of luck.

Josh3D

I apologize for the delay on this. Ross is on the right track. You need to set the width smaller than the viewport, then set min-width to compensate. Please replace your code with this:

<div style="position: relative; padding-bottom: 62.45%; height: 0px; overflow: hidden;">
<iframe src="http://www.swissprogress.ch/montre_VR.2/montre_VR.2.html" frameborder="0" scrolling="no" style="position: absolute; top: 0px; left: 0px; height: 100%; width: 1px; min-width: 100%; *width: 100%;"></iframe></div>

I have submitted this to development as well.

federer007

hello i have problem in iframe furniture and car is not responsive design for mobile

Josh3D

Make sure you select 'Down-scale with browser width' when creating the KeyShotVR. That checkbox is under the Advanced settings.

In KeyShot 6, KeyShotVRs will be responsive by default.