In CSS, many position/layout properties are context-aware. For example, position: absolute; only works if the desired parent has position: related/absolute/fixed;. However, position: fixed; is very simple. It is always related to window, barely affected by parent container. But, I stuck in this small issue:
transform:scale(1);
position:fixed; right:10px; bottom:10px;
This is strange, I have position: fixed; but why it doesn't work?
So I checked its parent elements one by one and found the modal library left a transform: scale(1);. It doesn't make any visual difference and seems a side effect of animation. In browsers' implementation, even if scale(1) and translateX(0) don't make any sense, the transform property will recreate a coordinate system. As result, position:fixed of inner elements will not be related to window, but the transform element.
The solution is simple, change transform: scale(1) to transform: unset. In practice, avoid using transform in large containers, like a sidebar or modal. If you need it, make sure here is no position: fixed inside, such as some popups.
RetroArch project uses *.h files to store translation strings. Here aren't any tools to make the translation process easier. When source strings changed, you have to manually review the changes, locate and update translation strings. It is a hard work. As a big fan of RetroArch, I was thinking if it can be improved with modern i18n platforms.
Note: we are only talking about Google Translate function in Chrome or Chromium based browsers. Other translate plugins or software don't necessarily work with this solution. And this solution doesn't solve all issues, just a part of them.
If an element (<button> in this case) contains multiple rendered string variables, they become text nodes in React's VDOM and HTML DOM. However, Google Translate doesn't care about text nodes and wrap them inside a <font> element:
<button><font>+你好世界</font><button>
Since they are not text nodes anymore, synchronization between React and DOM was broken. The button content will not be updated anymore.
How to fix it
Simply avoid this situation. Write every {variable} inside an element, as the only child.
Just make sure: a text node or string variable must be the only child of an element.
Event target
Another issue is that the click event target will change. It might be <font> elements instead of <button>. Carefully check everywhere you use e.target, considering they might not be the button, input or other elements you expected.
A further suggestion is to avoid using any e.target reference. Here is a piece of legacy code:
In this case, you usually cannot modify the component as you want.
You can try to use <span>your string</span> instead of "your string" as component properties.
Report to the library maintainers and make a PR with above methods.
If the element doesn't support child elements
Some components doesn't support inner wrappers, like <option>. If you put <span> inside <option>, React will give you warnings in console, even though the rendering works. So you probably don't want to do it.