Sticky Navigation & Add to Cart Panel - Not Working on Social Network Browsers

[FunkyCss]

Sticky Navigation & Add to Cart Panel - Not Working on Social Network Browsers

Description:

When users click on ads within social media platforms (like Facebook, Instagram, or others), the content is opened within the social media app's internal browser. This setup is designed to help advertisers by providing better tracking and UI control.

However, it has been observed that the sticky navigation from GP (GeneratePress) and the "Add to Cart" panel do not work as expected when the site is viewed within these internal browsers. The issue appears to be isolated to the in-app browsers used by these platforms.

Steps to Reproduce:

1. Set up a sticky navigation and "Add to Cart" panel in GP.
2. Visit an ad on Facebook ( Mobile )
3. Click on the ad within the social media app (so the page opens in the internal browser).
4. Observe that the sticky navigation and the "Add to Cart" panel either do not stick or behave inconsistently.

Expected Behavior:
The sticky navigation and the "Add to Cart" panel should behave as they do in other standard browsers (e.g., Chrome, Safari, Firefox), sticking to the top of the page and allowing users to seamlessly add items to the cart.

Actual Behavior:

• The sticky navigation bar does not stay fixed as the user scrolls.
• The "Add to Cart" panel does not appear or fails to remain accessible.
• Other related JavaScript features that rely on scroll events may also not function as intended.

Browsers Affected:

• Facebook in-app browser
• Possibly other social media internal browsers (e.g., Twitter, LinkedIn, etc.)

Additional Notes:

• The issue is specific to the environment within social media in-app browsers. It works fine in standalone browsers like Chrome, Safari, etc.
• The root cause might be due to how these internal browsers handle JavaScript, event listeners, or sticky positioning.
• Have not tried yet on Facebook ads on PC, this behaviour is on mobile devices

Possible Fixes/Investigation Areas:

• Investigate if event listeners like scroll, resize, or sticky positioning are being overridden or throttled by the in-app browser.
• Consider using polyfills or alternative methods to detect and address in-app browser behavior.
• Evaluate the use of user-agent detection to implement fallback solutions when the site is loaded in these specific in-app environments.