contenteditable és un atribut aparegut amb HTML5 que permet que certs elements HTML siguin editables o modificables al navegador de l’usuari. Aquesta propietat la fan servir editors de text per a pàgines web, alguns tan populars com TinyMCE.
Webkit (el motor de renderitzat de navegadors com Safari, Opera i els que utilitzen Blink com Chrome) té un problema en la manera en que gestiona els objectes contenteditable: quan s’han aplicat estils específics (per exemple al body d’un editor TinyMCE), en certes ocasions alguns d’aquests estils afegits (com line-height o font-size en ems) generen regions span indesitjades dins del codi, fet que pot comportar canvis imprevistos en el format obtingut, com diferents mides de lletra o interlineats inesperats.
El problema existeix des de fa alguns anys i ha estat reportat, tot i què no ha estat corregit mai. Sembla ser què es considera part d’una funcionalitat que compara els estils en modificar blocs i intenta mantenir-los inserint elements span en línia. Amb tot, amb Firefox, Internet Explorer i Microsoft Edge no es dóna aquest cas.
Algunes solucions
Els editors WYSIWYG més populars han anat afegint connectors o plugins o bé canvis per compensar aquest error, de manera que en molts casos només caldrà actualitzar el programari o les biblioteques corresponents.
En determinats escenaris, però, no sempre ens és possible actualitzar els editors, ja sigui per raons de compatibilitat o per què hi ha involucrades aplicacions crítiques que no podem manipular amb facilitat o amb la freqüència que voldríem. En aquests casos podem optar per altres solucions més simples, com utilitzar estils uniformes o pegats amb JavaScript.
Una de les solucions proposades a Stack Overflow és observar el DOM per controlar aquest comportament. Fixem-nos en el següent exemple: en la tercera caixa utilitzem mutation observers en comptes de mutation events, i restringim l’acció a la plataforma Webkit:
(Explora aquest codi a JSFiddle)