I have the following HTML with .popup having absolute positioning:
<span class="has-popup">載っ<div class="popup">Distance between っ and て changed :(</div>てる</span>
The popup visibility is toggled between none and block by hovering events. With the div invisible the kerning works as expected and the distance between っ and て stays small. With the div visible however the distance between the characters increases (seemingly the kerning is disabled).
Is there a reliable way to enable kerning across an embedded div like this?
The behaviour also seems to differ between browsers. The above described effect happens on Firefox but on Chromium the kerning seems to work as expected in both cases. Am I dealing with a browser bug here or is the intended behaviour undefined?
I set up a fiddle to test this: https://jsfiddle.net/q9wkcLbr/