Streaming live at 10am (PST)

Magic Has Happened but Not on iOS


#1

Hello Webflow Staff & Community.

Im a Pro account holder and as every other person here im fan of webflow and trying to build a living out of it. Just after a month of hands on . I have created this most complex site ( according to me ) in webflow and it looks amazing across all screens and devices . But , iOS is what stealing the game . There is a wired behaviour on iOS devices . I think its because of complex 3D .

Please open the portal on any device and compare it with iOS any device . You will be able to to see the design issues.

Please help , I have spent 17 hours to complete this but iOS issue is like forcing me to re-do new layout or I may loose this project as client is pissed off. Please help

Also , Do share you thoughts on design bad or good anything ill improvise .

http://yxz.webflow.io/3d1

https://preview.webflow.com/preview/yxz?preview=d4eb6d2bf90e7909a149c7e2655a9497

Thanks


#2

@PixelGeek Please Help :fearful::weary::joy::sweat_smile:


#3

Hi, I get the same thing on IOS than on Desktop, most likely. iOS up to date, iPhone 6S+

What is the site supposed to look like? And what is it suppose to do (click somewhere?)

Be aware that inside a breakpoint there's a range of possible widths:


#4

Here is the proper desktp look which is fine

Here is Nexus 5 ( Real Device ) , Which is again somehow fine rather good.

Here is iphone 4S ( Real Device )

As you can see in iphone stairs are disturbed , stand is missing , scooter position Now if you check on other iphone models and version display some or the other wired behaviour . This is going to be home page and I havent connected it to any other page yet so no click-able options Please help


#5

@vincent Yes may be iphone 6S+ is handling 3D but scooter position is still disturbed in your mobile.


#6

The 4S is shorter in height and you'll get the same result on your computer if you make your browser shorter in height.

For the Desjtop, I have this:


#7

I think you have worked with a very biig ZOOM IN value in your browser.

In chrome, click on View and then Actual size, to go back to normal.


#8

This is what I get if I zoom in 5 times in Chrome


#9

Usually when you try to work with an anormal zoom, Webflow warns you:


#10

@vincent I have no idea what you are refreing to btw my desktop zoom is fine and I did not got any warning . My concern is iOS , Please let me know if you have any solution .


#11

@vincent This is my browser view . Is this what you are pointing to ? Hope this is fine


#12

Nothing shows up when I click on the read-only link. Just an empty project.

Regardless, I am wondering why the whole thing NEEDS to be CSS-only on an iOS device. I would construct the pieces individually in Illustrator or something like that and just import them as SVG or PNG files. That way you can just do absolute positioning/sizing and you won't need to worry about any of this stuff on any device.

If the idea is that you are going to animate all of this, you'll need to do that anyway, as you are going to choke just about any iOS device by animating that many objects (iOS devices are low on RAM).

Beyond that, I think you may just be trying to do too much too soon. Bells and whistles are great, but I have a feeling that even if you got this to function the way you want, your client would not be very happy with it, and visitors would not be as impressed as you may be thinking.

I know you didn't ask for feedback; but I've been doing this for 15 years and I'm just trying to maybe spare you some of the exasperation you are sure to be embroiled in very soon as this project moves along.


#13

@Cricitem , Using Images and achieving task is a easy man game . And Im not the one who take easy turns. There is a big vision , reason & strategy to do things in this way . I may be naive in this space but usually I achieve in 1/10th time as compared to others. Thanks for your suggestion and please do not consider my statement as arrogance , its just the fire within


#14

I request everyone here please do not flood this post , unless you have you have exact solution to my problem please reply I'd be really thankful to you.


#15

@Cricitem home page is blank go on page 3d1


#16

What is the browser you're designing with on Webflow?


#17

@vincent Im using chrome


#18

OK.

But the screenshot you're showing me, can you do it again, a bit larger, with the Webflow designer tab active, please?


#19

@vincent Here its is , I think this is what you are looking for

src="/uploads/webflow1/original/2X/9/947c08a03274b5e46f63d3488d07a2c2cd570ee7.png" width="690" height="387">


#20