Mobile Banner Buttons Not Responding : Troubleshooting

Overview

In some storefronts, the Pandectes cookie banner may appear correctly on iPhone devices, but the banner actions are not interactive. In this scenario, visitors can see the banner, but tapping Accept, Deny, or the Close "X" button does not trigger any response.

In the investigated case, the issue was not caused by the banner configuration itself. It was caused by a JavaScript conflict with fastclick.js, a legacy library historically used to remove tap delay on mobile browsers. Modern mobile browsers generally no longer require this behavior, and keeping FastClick in the theme can introduce event-handling issues.

Why This Happens

The current Pandectes banner is rendered as a web component (pandectes-cmp). In the affected storefront, fastclick.js was intercepting touch and click behavior in a way that prevented interactions from reaching the banner controls.

This type of issue is especially visible on iPhone devices because both Safari and Chrome on iOS rely on the same underlying browser engine in standard iOS environments, so the same interaction problem can appear across both browsers.

Step 1. Confirm the Symptom on iPhone

Verify the issue on a real iPhone device.

Expected behavior in this case:

• The banner is visible
• The buttons are rendered normally
• Tapping Accept, Deny, or Close "X" does nothing

This step is important because the issue may not reproduce on Android devices.

Step 2. Inspect for Theme-Level JavaScript Conflicts

Review any custom or theme-provided JavaScript that modifies:

• touch events
• click events
• mobile gesture handling
• synthetic tap behavior

In the confirmed case, the conflicting script was:

fastclick.js

If the storefront uses legacy mobile interaction libraries, they should be reviewed first.

Step 3. Temporarily Disable fastclick.js

Using browser developer tools, prevent fastclick.js from loading and then reload the storefront.

If the banner buttons become clickable after disabling the script, the root cause is confirmed.

This is the key validation step:

• With fastclick.js enabled → banner buttons do not respond
• With fastclick.js disabled → banner buttons respond correctly

Step 4. Choose the Resolution Method

There are two valid approaches.

Option A. Remove fastclick.js

This is the preferred approach when the script is no longer required by the theme or other storefront functionality.

Because FastClick was created to address tap-delay behavior on older mobile browsers, it often provides no practical benefit on modern mobile environments and can instead create event conflicts. ([GitHub][1])

Use this option if:

• the script is legacy
• the theme does not depend on it
• testing confirms no regressions after removal

Option B. Keep fastclick.js and add a compatibility fix

If the script must remain in the theme, add the following snippet so the Pandectes component is marked with the needsclick class:

<script>
customElements.whenDefined('pandectes-cmp').then(function() {
  document.querySelectorAll('pandectes-cmp').forEach(function(el) {
    el.classList.add('needsclick');
  });
});
</script>

This adjustment tells FastClick not to interfere with the Pandectes component and allows the banner actions to receive click events correctly.

Step 5. Place the Snippet in the Theme

Add the snippet to the theme so it loads on the storefront body, typically before the closing </body> tag.

After saving the change:

1. open the storefront on an iPhone
2. load the page where the banner appears
3. test Accept, Deny, and Close " X "
4. confirm that the controls are now interactive

Step 6. Re-Test Across mobile Browsers

After applying the fix, verify the behavior in:

• Safari on iPhone
• Chrome on iPhone

Because mobile browsers commonly share the same engine behavior in normal storefront conditions, confirming the fix in both browsers helps validate that the interaction issue is resolved consistently.

Technical Notes

• This is a frontend interaction issue, not a consent-logic issue.
• The banner can render correctly even when the click handling is blocked.
• If other scripts also modify touch or click handling, additional review may still be required.
• When possible, avoid legacy tap-optimization libraries on modern storefronts unless there is a specific and verified dependency.

Summary

If the Pandectes cookie banner is visible on mobile but its buttons are not clickable, first check for theme-level JavaScript conflicts.

In the confirmed case, fastclick.js was blocking interaction with the pandectes-cmp web component. The issue was resolved by adding the needsclick class to the component through a small compatibility snippet, while keeping the original script in place.

Updated on: 17/03/2026