How Safari Ruined My Tuesday

Chris McCord

Safari 15 shipped in September 2021 and included an obscure CSS bug that broke most LiveView applications. The LiveView client operates in two modes – connected, when it can talk to the server over websockets, and disconnected when offline. When Live

Fly.io

•

Chris McCord

•3 min read•beginner•

--

•View Original

DockerElixirHTML

Overview

The article discusses a bug in Safari 15 that affects LiveView applications by causing the CSS property 'pointer-events: none' to persist indefinitely, rendering elements non-interactive. It outlines the challenges faced while debugging this issue and suggests a workaround to mitigate its impact on user experience.

What You'll Learn

1

How to identify and troubleshoot CSS bugs in Safari

2

Why the 'pointer-events' CSS property can cause issues in LiveView applications

3

When to apply workarounds for CSS bugs in production environments

Prerequisites & Requirements

Basic understanding of CSS and its properties
Familiarity with Phoenix LiveView framework(optional)

Key Questions Answered

What bug in Safari 15 affects LiveView applications?

Safari 15 introduced a CSS bug that causes the 'pointer-events: none' property to stick indefinitely, making elements non-interactive even when they should be responsive to user actions. This issue particularly impacts LiveView applications that rely on dynamic class toggling to manage user interactions.

What is the workaround for the Safari bug affecting LiveView?

The workaround involves removing 'pointer-events: none;' from the app.css file since LiveView already ignores clicks on links and buttons when disconnected. This adjustment allows for better interaction handling and mitigates the effects of the bug until a permanent fix is implemented.

How does the bug manifest in Safari's web inspector?

The web inspector incorrectly reports the computed property of affected elements as 'pointer-events: auto', leading developers to believe that elements are interactive when they are not. This discrepancy complicates debugging efforts and can lead to significant user experience issues.

Technologies & Tools

Frontend

CSS

Used to manage the visual presentation and interactivity of elements in LiveView applications.

Backend

Phoenix Liveview

Framework used for building interactive web applications with real-time features.

Key Actionable Insights

1
Implement a robust testing strategy for CSS properties across different browsers to catch such bugs early.
Cross-browser compatibility issues can lead to significant user experience problems, especially in production environments. Regular testing can help identify and resolve these issues before they impact users.

2
Consider using feature detection libraries to manage CSS properties dynamically.
Feature detection can help ensure that your application behaves consistently across different browsers, reducing reliance on specific browser behaviors that may change over time.

3
Stay updated with the latest browser release notes and known issues.
Being aware of known bugs can help developers anticipate potential issues and implement workarounds proactively, improving overall application stability.

Common Pitfalls

1

Assuming that the web inspector accurately reflects the state of CSS properties can lead to debugging frustrations.

This can occur when browser bugs cause discrepancies between reported and actual behavior, as seen with Safari's handling of 'pointer-events'. Developers should verify behavior through user testing rather than relying solely on inspector tools.

Related Concepts

CSS Properties

Browser Compatibility

Debugging Techniques