I deployed a .war file through IntelliJ Idea on a Tomcat server.  

I noticed a character "ä" was not properly displayed while at other places the same character was displayed correctly. I found out that only the special characters that I hard-coded in my .js files were affected.  

I tried to set all my .js files to UTF-8 in IntelliJ, I also changed all standard encoding settings to UTF-8 but the error didn't go away.  

All my js files are mapped into one index.js file using webpack, but how exactly I don't know because this is a project initially set up by someone else. 

I recently made a new interesting observation:
When I first open up a browser (tested with Firefox and Chrome) it's displayed incorrectly:  

[![Wrong display](https://i.stack.imgur.com/u0mVc.png)](https://i.stack.imgur.com/u0mVc.png)  

On regular reload (`F5`) nothing changes, but when reloading with `CTRL + F5` it's suddenly correct:
[![Correct display](https://i.stack.imgur.com/We0FO.png)](https://i.stack.imgur.com/We0FO.png)  

This really confused me...does anyone have an idea what might be going on here?  

I used to have the same problems with my Java files, but after changing the encoding in my gradle build file that worked.  

Ultimately my question is:  

**What do you think should I change in order for the special characters to always be displayed correctly?**