html element get scrambled when re load electron browser

so using electron to create an electron app which contain multiple tabs, the thing is when i reload the page for changes all the tabs html element would get scrambled

am using this format https://www.w3schools.com/howto/howto_js_tabs.asp

This is my electron code

console.log("-------------------------------------------------------------------------------------------------------------------------------")
// Modules
const {app, BrowserWindow,ipcMain,screen , remote} = require('electron')
const windowStateKeeper = require('electron-window-state')
let win;
const electron = require('electron')
// Enable live reload for all the files inside your project directory
require('electron-reload')(__dirname);

test = ()=>{
  var window = remote.getCurrentWindow();
       window.close(); 
}
// mainWindow.webContents.on('will-navigate', function (evt, url) {
//   evt.preventDefault();
//   mainWindow.webContents.executeJavaScript('loadPageWithIframe("' + url + '");');
// });
function createWindow () {
// const { width, height } = screen.getPrimaryDisplay().workAreaSize;
   mainWindow = new BrowserWindow({
    transparent: true,

    frame: false,
    maxWidth : 1200,
    maxHeight: 700,
    minHeight :700 ,
    minWidth :1200 ,
    width : 1200,
    height: 700,
    webPreferences: {
      webviewTag: true,
      enableRemoteModule: true,
      nodeIntegration: true
    }
  })
  
  mainWindow.setMenu(null)
  mainWindow.loadFile('main.html')
  // mainWindow.webContents.openDevTools();

  mainWindow.on('closed',  () => {
    mainWindow = null
  })
}
app.on('ready', createWindow)
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})
app.on('activate', () => {
  if (mainWindow === null) createWindow()
})