- an in game window shows a temporary “loading” component during startup
- the “loading” component is replaced with the actual in_game component once the current window is returned from the Overwolf API
- the in_game component has a transparent background (important) that covers the whole window and a smaller inner element that is shown to the user
If the below conditions are met, then the background of the in_game component will not be transparent but will retain what was painted previously. In this case it will be the “loading” component.
- The in_game component is not visible when it replaces the “loading” component (either
opacity: 0in CSS)
- The game that is running it using OpenGL.
The “loading” component is shown even though it was replaced by the in_game component
How it should look
The background will become transparent once it gets painted over. Some ways I found that paints over the background:
- tooltips that pop up will paint over a portion of the background that they appear over
- modals can paint over the whole window
- alt tabbing away from and back to the game while the in_game window is visible causes it to repaint the whole window. It doesn’t get repaint if the in_game window is not visible.
Can you reproduce it (exact steps to reproduce):
- Download Osu! for testing because Osu! uses OpenGL and has a compatibility mode that runs Dx9
- Download the demo app from the github page at the bottom of the post. It’s a basic create-react-app that opens an in game window.
npm run buildto build it
- Load the app using Overwolf dev tools
- Run the app
- Open Osu!
- Wait for the “loading” component to go away.
- Press ctrl+x to show the in_game component.
- See the blue square with the “loading” component in the background as seen in the first screenshot above.
- alt+tab out and back into the game to repaint the background to get to the same state shown in the second screenshot.
You can repeat the above using a DirectX game and the bug will not occur. To set Osu! to use DirectX go to Osu!'s Options > Renderer > Compatibility mode and check that option. Then close and relaunch the app.
There is another way to see this bug, but requires dev tools:
- Do the steps above to the build demo project and Osu!
- Run the app, run Osu!, and open the chrome dev tools for the in_game component.
- While the in_game component (blue square) is not visible and Osu! is in focus, mouse over the
rootelement in the DOM to paint the in game window blue. Then move your mouse off the DOM element.
- Unhide the in_game component with ctrl+x and it will look like below.
Do you currently have a workaround?
Yes, but it doesn’t fix the underlying issue. I can use a timeout to hide the in_game window after the initial render to make sure the whole window is painted over once.
However, this won’t fix cases where the bug is triggered after the initial render.
Please reproduce and attach a zip package of your OW client logs
Link to github page with reproducible demo: GitHub - fgfl/min-demos-non-transparent-bg-bug