Home > Blog > 2014 > 01 > Fixing a Bug with the RTE Editor in Chrome

Fixing a Bug with the RTE Editor in Chrome

Last year, there was an update to Chrome that caused a bit of a headache for some my client's editors. In the back office, if they tried to merge block level items, like paragraphs or list items, wierd stuff started happening.

Here's some example copy in the RTE in an affected site:

RTE1

Now, I stick the cursor at the beginning of a paragraph and hit delete to merge two paragraphs, and this happens (note the second paragraph has gone tiny):

RTE2

WTF? This doesn't happen in any other browsers, just Chrome. Lets look at the HTML source of the RTE text and see what's going on:

RTE3

As you can see, Chrome has caused the RTE to wrap the second paragraph in several spans, and has added a load of inline line heights to the anchor tags. Not good. I waited to see if a future update to Chrome would fix this, it didn't. I have however figured out what causes it to freak out. Chrome doesnt like font sizes or line heights on the BODY or P tags in your RTE stylesheet to be defined in EMs for some reason. Switch the units to PX in your CMS stylesheet, clear your browser history and reload the CMS, and the issue should disappear.

I hope this helps anyone else who's run into this issue!

Enter Comment