Last week, we experienced something that we never thought will happen. Some missing translations messed up the content and layout of one of our landing pages.

This is how we expected it to look like:

However, it looked like this:

Furthermore, in mobile, it messed the page layout by content div being pushed inwards due to the long string.

Investigation

We found out that it’s due to I18n’s missing translation message.

Notice that the message is enclosed in a <span></span> element. However, since the translated segment was being used as the value for the images’ alt, the span element messed with the alt’s value. Unfortunately, the segments being used as image alt were not yet available for certain locales.

This code was tracked to this line in ActionView#TranslationHelpers.

Solution

After reading the method in ActionView#TranslationHelpers, we found a way on how to workaround this problem. By passing a :default paramater in or t method call in the view, we were able to override the default span return element on missing translation.

Before fix

= image_tag 'my_image.gif', alt: t('my.missing.segment')

We set :default to a blank string.

The fix

= image_tag 'my_image.gif', alt: t('my.missing.segment', default: '')

After applying the simple fix, the images showed as expected!

Rails 5 Alternative

If you are using Rails 5, you can also set this config in your application.rb.

config.action_view.debug_missing_translation = false