Touchmove pointer-events: none CSS does not work on Chrome for Android 4.4 / ChromeView

The pointer-events: none CSS property doesn't work properly on Chrome for Android 4.4 (ChromeView) for touchmove events. This causes issues when trying to disable touch interactions on overlay elements.

The Problem

On Chrome for Android 4.4, elements with pointer-events: none still receive touchmove events, breaking the expected behavior where these elements should be non-interactive.

Solution: Using touchstart with preventDefault()

Instead of relying on CSS pointer-events: none, use JavaScript to handle and prevent touch events:

<div id="overlay" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
  Overlay Content
</div>

<script>
const overlay = document.getElementById('overlay');

// Prevent all touch interactions
overlay.addEventListener('touchstart', function(ev) {
    ev.preventDefault();
});

overlay.addEventListener('touchmove', function(ev) {
    ev.preventDefault();
});

overlay.addEventListener('touchend', function(ev) {
    ev.preventDefault();
});
</script>

Alternative Approach: CSS and JavaScript Combined

Use CSS pointer-events: none for modern browsers, with JavaScript fallback for Android 4.4:

<div id="overlay" style="pointer-events: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
  Overlay Content
</div>

<script>
const overlay = document.getElementById('overlay');
const isAndroid4 = /Android 4\./.test(navigator.userAgent);

if (isAndroid4) {
    // Fallback for Android 4.4
    overlay.style.pointerEvents = 'auto';
    
    overlay.addEventListener('touchstart', function(ev) {
        ev.preventDefault();
        ev.stopPropagation();
    });
    
    overlay.addEventListener('touchmove', function(ev) {
        ev.preventDefault();
        ev.stopPropagation();
    });
}
</script>

Key Points

• The preventDefault() method stops the browser's default touch behavior
• stopPropagation() prevents the event from bubbling to parent elements
• User agent detection helps target Android 4.4 specifically
• Handle all touch events (touchstart, touchmove, touchend) for complete coverage

Browser Compatibility

Conclusion

Use JavaScript event prevention as a reliable solution for Android 4.4 compatibility. Combine with CSS pointer-events and user agent detection for optimal cross-browser support.