How to Solve Electron Zoom Cache Issue

How to Solve Electron Zoom Cache Issue

by
Reading Time: 2 minutes

If you’re familiar with Electron.js and creating desktop applications with Frontend technologies such as HTML, CSS, and Javascript, there’s a chance that you’ve encountered an issue related to Electron’s zoom caching.

When you change the zoom in your app, it gets saved in a file that is located in the forgotten lands of your computer. In this post, we gonna solve Electron zoom cache problem together, let’s get started.

An Improved Perfect Number Algorithm

Where is Cache File Located?

In order to change our zoom level to the normal level, we should find the caching file first. In Windows, you can find your Electron cache file in the following location: C:\Users\<<username>>\AppData\Roaming\<<package name>>\Preferences. When you open up this file with your favorite text editor, a mess will be waiting for you.

Electron Cache file

Solving Electron Zoom Cache Issue

Next, we gotta play with a value to achieve success. Hit CTRL+F and search for per_host_zoom_levels. You’re most likely to see this value at the end of the file. The structure is this data might be looking like this:

{
  "per_host_zoom_levels": {
    "<< some_random_numbers >>": {
      "file:///<< your_project_location >>/index.html" : -1.0
    },
  }
}

In that case, you have to change -1.0 or whatever value is located there to 0. This little trick will reset your application’s zoom level. Save the file and re-run your Electron application.

I hope this helps you if you’re stricken by this problem. Stay tuned for new posts and let me know what you think in the comments!

Leave a Comment