Jump to content
Search Community

Responsive scaling not working on mobile

AdObeOne test
Moderator Tag

Go to solution Solved by AdObeOne,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello,

 

Using iframe (like the example below) works great in responsive scaling of my animation in all desktop browsers I tried under OS-X and Windows 10. But not on my iPhone 4S using Safari and Chrome. I haven't been able to test it in other mobile browsers unfortunately. If you want to see it in action. There are two animations at the top of: www.nieuwjaarverslag.nl.

 

I've tried all the css, javascript/jquery solutions that I could find online, but none of them work. I read about the problem on iOS where the original dimensions of the content of the iframe are maintained, so that only a part of it is visible. Is there a solution that does scale an animation correctly in a mobile browser?

 

Any help is greatly appreciated,

 

Ad

 

<div id="container">

<iframe src="folder/animation.html">
   <p>iframes are not supported by this browser.</p>
</iframe>
</div>
 
#container {
    position: relative;
    padding-bottom: 40%; (because the animation is 500 by 200)
    height: 0;
 overflow: hidden;
}
#container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}
 
Link to comment
Share on other sites

hello AdObeOne,

 

I was a little confused by your question.

  • Are you trying to find a way to scale or resize an iframe and still keep its proportions proportional (aspect ratio)?
  • Are you trying to make your iframe fit its parent container, regardless if the browser is resized?

This doesnt look like a GSAP specific question but more of a CSS or JS logic approach.

 

Normally you can use padding-top: 56.25%; on your #container div tag, instead of using padding-bottom:40%.

 

:)

  • Like 4
Link to comment
Share on other sites

Hello Jonathan,

 

Thanks for your reply. I'm looking for a solution that will make iframe content, so not the iframe itself, scale proportionally within a mobile browser. The iframe itself scales fine as far as I can detect. I know this is not a GSAP specific question. But I think the solution can benefit potentially all GSAP users.

 

The padding-bottom works fine in all desktop browsers I tested. But not in Safari and Chrome on iOS. The only 2 mobile browsers I have access to. All my friends have iPhones. They can't check it for me in other browsers. I've tried all css and javascript/jquery solutions I could find. I've only not tried a php / AJAX solution, because I have no knowledge op php.

 

Is there an alternative for using an iframe that you know that works in mobile browsers? I found one or two alternatives, but either they don't scale the animation proportionally or they don't show the animation at all.

 

Kind regards,

 

Ad

Link to comment
Share on other sites

Normally you would also add width: 100% to the #container due to width and sometimes height not being inherited.

 

But you can also checkout this JS video polyfill called fitvid.js.

 

http://fitvidsjs.com/

 

There are also many other video responsive polyfills out there.

 

iframes do work on mobile browsers.. usually sometimes you need the right CSS for it to display and behave correctly cross browser.

 

Usually a codepen example would be helpful

 

 

:)

Link to comment
Share on other sites

Hello Jonathan,

 

Thanks for your reply. I tried fitvid.js, but it doesn't seem to do anything.

 

I have created a bare minimum example that uses a simple image of two diagonal lines, rather than a whole animation, because the animation is not essential to the problem. I see no way to indicate or include an image in a codepen. Am I overlooking something there?

 

I have attached a zipped file of the bare minimum example. i hope this enables you to help me solve this problem. The 'x' in the image is totally visible and scales perfectly in desktop browsers, but will be only partially visible in a mobile browser window.

 

Kind regards,

 

Ad

ResponsiveOnMobile.zip

Link to comment
Share on other sites

Hello Jonathan,

 

In the meantime I've acquired a codepen pro account, so i could use my very simple example image easily. I made a codepen like you requested: codepen.io/AdObeOne/pen/obQpyY. Using fitvid, like you suggested, the 'x' is still only partially visible on my iPhone 4S using Chrome or Safari. Just like all the other solutions I've tried. The image does not resize correctly to fit entirely on the screen.

 

Solutions to this problem are mentioned on the codepen site. But I don't quite understand how to use them. http://blog.codepen.io/2014/03/11/resizeable-embeds/

I guess I should ask Chris Coyier about that. Or can you tell me what he means?

 

Kind regards,

 

Ad

Link to comment
Share on other sites

Since you are embedding an SVG file, be aware that there are a lot of browser bugs in the way each browser will display the SVG file which your using as an image.

 

Check out the below link, it has some useful info on the various browser behavior and how they treat embedded SVG files. And has some useful tips and tricks so they scale to fit within the iframe, image, or object tag.

 

https://css-tricks.com/scale-svg/

 

Hope this helps! :)

Link to comment
Share on other sites

Hello Jonathan,

 

Thank you for your reply. That is indeed a very informative article and I've read it before. And that gave me the solution of the padding-bottom hack. Which works fine on svg's, even on mobile browsers. But I guess I oversimplified my example. As indicated in the first post I'm trying to get the same result displaying an animation. So that all of it is shown proportionally within the div that contains it and that uses the same padding-bottom hack. Which works fine on all desktop browsers, but just not Safari and Chrome under iOS as far as I can test.

 

There is a solution mentioned on the CodePen site that I haven't been able to test yet, because I don't understand how to use it. I've requested a more elaborate explanation via the customer service of CodePen, but I have no reply yet. Maybe you could shed some light on it, so that all Greensock users can benefit from this solution.

http://blog.codepen....izeable-embeds/

 

Kind regards,

 

Ad

Link to comment
Share on other sites

Hello Jonathan,

 

I want to make the animations as a module. So separate files in separate folders. And just an embed of some sort on the actual page. That makes it easier for myself and others to do maintenance on the site itself and on the animation if necessary.

 

And as mentioned it works fine using the padding-bottom hack as suggested on: https://css-tricks.com/scale-svg/ Just not on (some?) mobile browsers, so I really would like to be able to test the solutions mentioned on the CodePen site: http://blog.codepen....izeable-embeds/

 

Could you please shed some light on these solutions? I still have no response from CodePen on this.

 

Kind regards,

 

Ad

Link to comment
Share on other sites

  • 2 weeks later...

Hello fellow Greensock user,

 

Short: do you have a solution to make an animation scale responsively within a webkit mobile browser window?

 

Longer: I've managed in the meantime to try the CodePen solution and the resizable JQuery option. Before that I tried the FitVid solution and a couple of other 'solutions' that I found on forums. But non of them work.

 

To see what I mean in context, please use a webkit mobile browser to visit: www.nieuwjaarverslag.nl. There are two animations and one interactive piece of content that are only partially visible. I would very much like to be able to correct that.

 

Any help is deeply appreciated,

 

Ad

Link to comment
Share on other sites

  • 2 weeks later...

Two weeks since the previous post on this topic. No new response. So no one but me has a problem using Greensock animations scaling responsively on webkit mobile browsers?

 

Please let me know. Which solution did you use to make this work?

Link to comment
Share on other sites

Sorry, I'm struggling to understand the question in its entirety or see how I can best assist. I assume others are as well as this topic has 185 views. 

 

Unfortunately, we can't be testing your site on mobile devices trying to find solutions for what seems to be an issue that isn't directly related to GSAP. 

 

I think your best bet would be to post a very basic example on stackoverflow where there is a huge community of users much more familiar with the specifics (SVG, iframes, mobile webkit browsers) of this issue.

  • Like 3
Link to comment
Share on other sites

The fix is incredibly easy. Don't use iframes.

 

Take Jonathan's advice and put your SVG inline. This will make sure that the viewport and it's container will scale just like everything else on your page. If you want to keep it in a separate file, use jQuery's load method. 

 

There. Problem solved in one line of code.

$("#some-container").load("some-file.html", function() { /* start animation */ });
  • Like 2
Link to comment
Share on other sites

@Carl

 

I don't know how to put it simpler then this (quote from a previous post):

" Short: do you have a solution to make an animation scale responsively within a webkit mobile browser window? "

And there is a bare minimum example attached to one of my previous posts on this topic.

 

I'll try OSUblake's solution, using a separate file, because of maintainability. If this does not solve the problem then I'll take the Stackoverflow route you suggest.

 

@OSUblake

Thanks for your response. I'll try the load option. I don't like the inline option, as I replied to Jonathan. I like to split up large chunks so I can more easily keep an overview. I'll let you know if this solves the problem.

Link to comment
Share on other sites

Hello OSUblake,

 

The correct amount of space is created (width and height) using the load command, but nothing is shown of the loaded html-file. I can't find any information about how to accomplish that. Can you tell me how I make the loaded file visible?

 

Thank you in advance for your help,

 

Ad

Link to comment
Share on other sites

I don't know what's going on without seeing it, but if you're trying to load an html file, just include the HTML as if it were inline. So don't include tags like html, head, body, etc. If you want to also load CSS and JS as part of your HTML file, you can do so by putting your CSS links at the top and your JS scripts at the bottom.

 

Here's an example where I do that by loading partial.html into the #container element.

http://plnkr.co/edit/iH1RodRlu2jvAygnfvKo?p=preview

 

You can also load an SVG right into the container if you don't have a need for any HTML.

http://plnkr.co/edit/5l2al3EPl9HIK2FQgO2C?p=preview

Link to comment
Share on other sites

Hello OSUblake,

 

Thanks for the links. As I understand, the html file only contains the assets in these examples. No links to css or javascript within this loaded html file. 

 

This is what I use in my index.html:

       <div id="myContainer">

          <script>$("#myContainer").load("folder/myAnimation.html")</script>
       </div>
 
My site is like a shop window. I (very) regularly change parts of the content. The content are examples of what I can do for potential clients. For easy maintenance I like to keep an animation as a self contained unit within the page code and within the file structure. So it loads it's own css and javascript file(s). And all files for the animation are within one folder.
 
The correct amount of space is created for my animation. So this partially works. But no animation is shown. Is it necessary for the solution that you suggest that there is a function call as part of the load command to a function that contains the animation commands?
 
Kind regards,
 
Ad
Link to comment
Share on other sites

You might have some order issues going on. If you're going to inline scripts like that, make sure your vendor scripts are at the top of the page (jQuery, GSAP, etc), so that they are loaded first. And no, you don't have to call a function to start the animation. However, you need to make sure that whatever code is related to that animation is linked or inside the html you are loading.

 

Due to the asynchronous nature of ajax, it will finish running sometime in the future. This prevents the browser from locking up while it loads something, but this also means that the rest of your code will execute before the loading is complete. So do not put any code after an ajax call if it is used to reference something that is being loaded.

// BAD
$("#container").load("partial.html");

// ERROR - element hasn't loaded yet
TweenMax.to(".foo", 1, { x: 100 });


// GOOD
$("#container").load("partial.html", function() {
 
 // ELEMENT IS READY
 TweenMax.to(".foo", 1, { x: 100 });
});


If you want to avoid using a callback function, I would just wrap the code in an anonymous function and put it at the bottom of the html you are loading, or in an external file. 

 

Example 

http://plnkr.co/edit/MPAauIW4bIALbXSQLWT6?p=preview

  • Like 4
Link to comment
Share on other sites

Hello OSUblake,

 

Thanks for your reply.

 

The animations I use are shown when I use iframe. So the order of included files is correct I presume. Or does the load function require another order?

 

All code for the animation is contained within the loaded html-file and the files that are linked to it.

 

I see in the linked example that "ajax" is included in the paths to the files? I use these paths for jquery and use local Greensock files.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>

Do I need to change that?
 
Kind regards,
 
Ad
Link to comment
Share on other sites

You shouldn't need to change external stuff like jQuery. You just need to make sure it's loaded first, and I would probably use a CDN like this one...

https://cdnjs.com/

 

You can check if your paths are correct by putting a little image inside the folder and see if you can get it to show up. Also, for AJAX  to work, you need to make sure you are running a local server due to security restrictions. That might be messing up your paths. If you don't know how to do that, just search around as there are 1000's of tutorials and different setups. I know a lot of people use some type of *AMP setup, like MAMP.

  • Like 2
Link to comment
Share on other sites

Hello OSUblake,

 

I didn't see that there was a second page. So I was still waiting.

 

I'm still in doubt regarding my questions.

  • When I use frames my animations are shown. So jQuery is loaded in the correct order. And my paths are correct. Is that correct?
  • If I only replace the iframe by a load command do I need to change anything in the order in which things are loaded or in the paths I use?

Is AJAX used when I use the load command?

 

Thanks for you response,

 

Ad

Link to comment
Share on other sites

First off, have you checked the console to make sure you don't have any errors?

 

Yes, the load method is using AJAX, so you need to make sure you're running the webpage from a server. And in theory you shouldn't have to change anything. All you are doing is changing the type of container from an iframe to a div. But I can't say for certain that you have everything setup correctly because I can't see what you are doing.

 

I provided you with 2 fully functional examples on plunker. Just adapt those example and work your way up to adding what you originally had. There's even a download button in the top-right corner of plunker. If you unzip it and run it from a server it's going to run exactly the same. 

Link to comment
Share on other sites

Hello OSUblake,

 

Thank you for your response.

 

So I have to install a server to be able to use the load command instead of iframe, to avoid the problem with webkit mobile browsers. That sounds like shooting with a canon on a fly ;-) Thank you for all your time and effort explaining this to me. I hope it benefits more users than just me.

 

I'll get busy with the console.

 

Kind regards,

 

Ad

Link to comment
Share on other sites

  • Solution

Hello OSUblake,

 

The console indicates two non relevant errors. A favicon.ico that is not found, but that is displayed anyway. And an include of a css file that is no longer used.

 

So no error messages regarding the use of the animations that are not correctly displayed within iframes on the mobile webkit browsers.

 

Kind regards,

 

Ad

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...