Grammarly Extension Breaks Website Layout with CSS Conflict

2025-03-29
Grammarly Extension Breaks Website Layout with CSS Conflict

A website builder discovered that the Grammarly browser extension was breaking their website's layout. Grammarly injects a stylesheet that overrides the website's own styles, particularly by using the same custom property `--rem`, causing the website's fluid typography system to malfunction. The author fixed the issue using a mutation observer and the custom property `--🤡`, and called on Grammarly to improve its extension's design to avoid conflicts with other websites' styles.

Development CSS conflict