Живя в стране, основной язый которой не английский и не русский, достаточно быстро — хвала современным UX-тенденциям — наблатыкиваешься ориентироваться в разного рода веб-приложениях. Даже, условно, налоговую карту могу заполнить без перевода страницы.
Тем не менее, пользоваться Google Translate приходится достаточно часто. И если вы хотя бы раз его в жизни использовали, вам прекрасно знакомо, что перевод часто ломает поведение приложения и крайне нежелательно, например, делать покупки на переведённой странице. Можно что-то упустить.
Почему это происходит? А вот об этом сегодняшняя статья дня и её перевод.
TL;DR
Google Translate в Chrome при переводе страницы подменяет текстовые узлы (
TextNode) на элементы <font> (sic!), ломая структуру DOM и работу React. После этого текст перестаёт обновляться при изменении данных, а операции с узлами (removeChild, insertBefore) вызывают ошибки. Обойти проблему можно лишь частично — оборачивая текст в <span> или отключая перевод, что снижает производительность и доступность.Как всегда, я рекомендую оригинал. Потому что там полно интерактивных примеров и дополнительной информации по теме.
Правда, финские программисты даже и пытаться не будут...
#translate