Is there a known bug with Webflow's IX2 off canvas animations that causes an ugly off canvas white space when scrolling left and right on touch screens?

Published on

September 22, 2023

Note

CommunityFAQ is not affiliated with Webflow. Click here if you'd like to visit Webflow's help resources.

There is a known bug with Webflow's IX2 off canvas animations that can cause an unsightly white space to appear when scrolling left and right on touch screens. This bug occurs when certain combinations of interactions and animations are used in conjunction with off canvas elements.

The issue is rooted in the way Webflow calculates the width of the off canvas element and how it interacts with the viewport on touch screens. When an off canvas element is activated and the user attempts to scroll horizontally, the width of the off canvas is not properly adjusted, resulting in the white space.

While this bug can be frustrating, there are a few workarounds that can help mitigate or resolve the issue:

Disable horizontal scrolling: One potential solution is to disable horizontal scrolling altogether. This can be achieved by adding custom CSS to your site's code or using the custom code panel in the Webflow designer. By preventing horizontal scrolling, you can prevent the white space from appearing.
Use overflow:hidden: Another option is to apply the CSS property overflow: hidden to the off canvas element. This can help the off canvas content stay within the viewport and prevent the white space from appearing. However, you need to ensure that this doesn't negatively impact the overall design or functionality of your off canvas element.
Contact Webflow Support: If the above workarounds do not resolve the issue, it is recommended to reach out to Webflow's support team. They can provide further guidance and assistance in troubleshooting the problem. Additionally, by reporting the bug, you can help them become aware of the issue and potentially expedite a fix in future updates.

It's worth mentioning that Webflow is constantly working to improve and refine their platform, so it's possible that this bug may be resolved in future updates. In the meantime, these workarounds should help you address the issue and provide a smoother user experience on touch screens.

Additional Questions:

How do I disable horizontal scrolling in Webflow?
What are some alternative off canvas animation options in Webflow?
Are there any other known bugs with Webflow's IX2 interactions?

How do div wrappers styled with percent width vs pixel width handle child elements differently in Webflow?

How can I open different popups when I click on different items (photos) from my collection list in Webflow?

How can I target the product variant color in Webflow to apply the hex code to the button background?

How can I create the text effect shown in Webflow?

In Webflow, how can I redirect a user from a 404 page to another page after a brief delay?

Is there a way to create a tabs component in Webflow where each choice grows in height when selected, similar to the show/hide interaction tutorial?

Do you have any tips for getting a custom favicon to display on Safari in Webflow?

How do I place a checkbox (radiobutton, etc.) without a form in Webflow?

What could be causing the animation trigger relationships to be lost when a Symbol is added to a new page in Webflow?

Is there a way to logically work through my stylesheet in Webflow to efficiently build my website, or do I need to edit the code myself?