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 can I limit the number of columns displayed on a bigger screen in Webflow using the grid layout?

Can Webflow hide special characters like ñ or ó?

How can I make a section in Webflow stop at the top of the screen when scrolling?

Is it possible to add a horizontal scroll bar to a SwiperJS slider in Webflow?

How can I resolve the issue where the slider in Webflow still allows scrolling past the available slides even when "Hide at each end" is selected?

How can I change the font size and padding of a Tippy tooltip in Webflow?

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

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

Is it possible to copy and paste complex difficult interactions between two cloneable projects in Webflow?

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?