Overcoming Overflow CSS Challenges: No code for fixing the white space on the side of your site.

SquareKicker Sticky Sections

Have you ever tested your site on a mobile device and found weird white space on the side as you scroll? This is called overflow and occurs when an element is placed or moves outside of the content box. Overflow hidden has been the go to fix for this problem but can create some significant issues with features like sticky elements or scrolling effects.

Combining SquareKicker effects like Scrolling Effects, Horizontal Scrolling, Sticky Sections and Sticky Blocks on a single site presents technical challenges, particularly in the way the code interacts with multiple device types and browsers often creating visible overflow (white space) on the side of a page.

One of these tricky combinations involves the clashing of CSS properties: “position: sticky” & “overflow:hidden”. If you have hand-coded these features, you may be familiar with the compatibility issues that can occur. The conflict with these two CSS properties has been one of our biggest challenges to overcome because we are not in control of the development of CSS web standards for browsers, eg. Chrome, Safari.

After searching the web, we found that we were not the only ones with this issue and there were no viable solutions to be found. In the ever evolving realm of web design, there's always room to push the boundaries of what a website can achieve. Contained in SquareKicker’s May 2023 update was a small but powerful addition which keeps Squarespace and SquareKicker’s advanced features working seamlessly together without overflow issues.

Below is a summary of what we learned and how we built a solution directly into websites using SquareKicker, providing users with seamless integration and allowing for more exciting design possibilities.

Touch & Mobile Devices with Overflow

Challenge of Combining Advanced Tools

To ensure effortless integration and eliminate the need for coding knowledge, SquareKicker works out all the fine details of the correct CSS that you need to create your design and equips you with the newest standards of the web without needing a full understanding of its complexities.

SquareKicker features like Sticky Split and Horizontal scrolling are among a few that use "position: sticky" which is a relatively new CSS property, introduced to browsers when Chrome supported its first stable version in 2017.

SquareKicker’s aim was to automate these sticky features in a way that would provide designers with a hassle-free experience allowing you to explore all the design possibilities without needing to worry about the code.

However, combining these advanced tools revealed its challenges — the CSS "position: sticky" property, which allows an element to remain fixed within its containing element as long as it is in the viewport, also needs the CSS property, “overflow: visible” on its parent elements, the containers that wrap elements such as the body and the html.

Now, here’s where things start to get interesting. With these advanced features, the CSS property “overflow: hidden” is often needed to avoid elements overflowing. This is where unwanted horizontal scrolling takes place and extra whitespace is revealed with elements that exist outside the viewport. You may have seen overflow before as it’s particularly common on touch devices and Safari browsers.

When these two advanced features are in use together, we get into a bit of a predicament. We need to choose which CSS feature will be dominant. Sticky works but then you get an ugly overflowing scrolling issue, or do you sacrifice sticky to prevent the website from overflowing?

Tackling the Sticky Situation

As Sticky functionality is a key component in several SquareKicker features, we needed to be proactive in this area. For a while we had a compromised fix where we could correct overflow with a sticky feature and both overflow and sticky would work together. But, the issue is that touch devices and Safari don’t support this fix so we had to automate multiple rounds of conditions to check and make sure these features were working together.

We were still not convinced that this was a satisfactory solution.

Most developer forums suggested applying "overflow: hidden" to the “<body>” and “<html>” of every website just in case an overflow exists. Although this seems like a straightforward solution, it will unintentionally cause other important features like sticky to stop working completely.

A Solution Beyond Expectations

A company value we have at SquareKicker is to be “Curious and Courageous” which encourages our team to never settle for limitations or impossibilities. After hours of research, testing, failure, fine-tuning and a bit of patience, an elegant solution presented itself that until recently, was impossible—enter "overflow: clip." This simple yet powerful addition revolutionized the game, overcoming the CSS Sticky and the Overflow impasse.

Browser and Device Compatibility

In 2023 a new and much needed CSS property became a standard for browsers, “overflow: clip”. The “overflow-x: clip” CSS property safely clips content around the viewport and stops any overflow scrolling. This is also fully supported for elements using “position: sticky” as it allows sticky to know where the boundaries of the viewport are.

This has allowed SquareKicker to release an update which automatically adds “overflow:clip” to your site to keep sticky features active on all browsers and devices, while also preventing unwanted overflow whitespace on your Squarespace website. Now all your favorite advanced combinations of features work in harmony together.

Enhancing the User Experience

Despite the obstacles, SquareKicker strives to deliver a seamless user experience for both the designer who is creating a website, and the visitor who engages in their design. Our commitment to responsiveness and compatibility continues to be an important part of SquareKicker’s development so when you have an idea… it just works!