Session Replay fails to render -webkit-line-clamp and other -webkit prefixes on Firefox (v147 or earlier)

[GMalacaria]

When recording a session from Firefox (playable on the latest v147), CSS properties using the -webkit- prefix are not captured or displayed correctly in the Mixpanel Session Replay player.

Specifically, the line-clamp functionality (which relies on -webkit-line-clamp, -webkit-box-orient, and display: -webkit-box) is ignored. This causes text to overflow and be displayed in full rather than truncated, resulting in a visual discrepancy between the actual user experience and playback.

Playback Steps

1. Open a website integrated with Mixpanel Session Replay using Firefox v147.
2. Navigate to a page that uses the following CSS:

CSS

.truncate {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

3. Record the session.
4. Display the replay in the Mixpanel dashboard (regardless of the browser used to view it).

Expected Behavior
The replay should reflect the actual UI as seen by the user, with text truncated according to line-clamp rules.

Actual Behavior
-webkit- specific styles are ignored in the replay's DOM snapshot. The text is displayed in full, breaking the expected layout.

Environment

• Recording Browser: Firefox 147.0 (and earlier)
• Library: Mixpanel Browser SDK (Session Replay enabled) mixpanel-browser@npm:2.70.0
• Operating System: Windows 11

Additional Context
Although -webkit-line-clamp is now part of the CSS standard, many browsers still require the -webkit- prefix for compatibility. It appears that the serialization process during session capture on Firefox either discards or fails to properly map these vendor-specific, prefixed properties to the replay iframe.

This doesn't happen with other browsers