This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Dave Feldman
Posted Jan 28 - Read on Facebook

I'm having a really weird problem with prototypes sizing themselves wrong on Chrome/Android. I'm modifying the viewport meta tag to set the scale to 0.3333 (this is a 1080x1920 screen), and things are coming out at the right size, but the prototype doesn't fill the screen—there's a wide white border on the right and bottom sides, and anything that should be there is clipped.

Framer.Device.screen.width is reporting at 980 rather than 1080, which corresponds roughly to the width of that white band. I've tried everything I can think of — different scale values, manually setting the width and height in the meta tag, manually setting the width and height of the layer itself...but no dice.

Even weirder, it seems like at least some of the time, refreshing the page (or just loading it again) makes the problem go away.

Any idea what's going on?

6 Comments

Devin Abbott

A friend ran into this problem today. After the viewport 0.3333 trick, rotating the device into horizontal and back into portrait would reliably get rid of that white band. (Unfortunately I didn't have time to debug and figure out what's going on)

Noam Elbaz

If I understood your problem correctly, I always set my Framer JS file at the start at 1/3 like you do, but I then go into the index html file and change scale to 1 ... and that fixed everything for me.

Dean Broadley

Hey Dave, I've been having the same problem for while with framer, specifically with Android. I think its a known problem with Framer and they're working on fixing it from what i can remember. Is that right Koen?

Koen Bok

I'll make an issue to look into this.

Dave Feldman

I've come up with a workaround until this is sorted out:
(1) Set initial-scale to 0.3333 in index.html's meta tag.

(2) At the bottom of the Framer code:
if (Framer.Device.screen.width < 1080) then window.location.reload()
This causes the prototype to refresh itself until the width is reporting correctly.

(3) If you're running locally on device (in my case, inside an Android app shell), even if you disable local file restrictions in the browser you still get Framer's warning about them. Combined with (2) above that means you just keep getting kicked out to the warning screen. So, in framer/init.js, modify isFileLoadingAllowed() to just return true. (Aside: it would be nice to have a built-in way to do this, as that warning screen is a pain even without this additional issue.)

Hope that helps.

Koen Bok

Awesome! Thanks for reporting back. I'll make sure we improve this.

Re. The warning, the shitty part is that we cannot reliably test it. We have to guess based on browser/platform.

Read the entire post on Facebook