//Editor X, 1 breakpoint question

Ask the community
,
1

Dear website together folders,

This is not to promote my website but to show you.

www.wouldyoulikecoffee.com

Dismiss the cookie banner and click the infinity symbol.

Search for page 008 when on mobile then the characters start moving a bit and desktop this happens by default page 008 to turn it off.

When on Android and Windows the feet do not jump location on animation start and end but on iOS they did, and I had to create an offset in width and height ratio.

If really bored, turn your device sideways and search for page 007 while on page 0.

//Note

Do not use the Android Facebook browser because it looks horrible, this is their own and what they run on top of this is really heavy, I got it working on Windows 11 Edge and Android Chrome.

//Question

When calculating the dimension of containers and animations do you use math.round() or math.floor()?

I ask because I wonder if this is causing it.

//Product

EditorX

//What are you trying to achieve:

I want to set the same dimension of elements to make it work on all operating systems I do use only 1 breakpoint, resize my glorified content flipper to see this, but I am still working on it.

//What have you already tried:

Setting an offset in width and height ratio, setting smaller dimensions, redid my website multiple times and I think that I tried all width and height possibilities.

//Additional information:

If my website or content is not allowed, please send me a mail because I am not sure if it is, and any feedback would be amazing.

2

screenshot
screenshot2736×1728 331 KB

//Fix

After some trial and error setting the width and height % to 99.5% instead of 100% fixed the glitching on iOS.

3

//Advise

When using one breakpoint to rule them all.

If your website blinks on Android, then your dimensions are wrong and if your images jump on start and end of an animation on iOS while using wix.animation() change 100% to < 100%

Also, stay below 93.8 vw because vw changes depending on screen width and if you make this value > then it won’t fit on all screens and could end up causing glitches.

4

//Eureka

Well, in the screenshot it is set correctly but on iOS it jumped after an animation ended or started, but after months of clicking, I finally figured out what caused the blinking on Android and this happening on OS devices.

margib=n

Sometimes it docks to a side set to 0% (the blue sides), and this happened while I did not notice.

If this happens, and you click a side you can press the button below the value to set it for all sides if you enter 0% then it undocks from all sides then reset your values, doing this fixed most the glitches for me.

margin2