Examples: Emscripten: fixes minor rendering issues (#9281)

- in Firefox, scrollbar would appear => adding overflow: hidden fixes this issue
- when the canvas has the focus, Chrome draws a very small blue outline, setting it to none fixes this issue
This commit is contained in:
Yan Pujante
2026-03-05 10:35:51 -08:00
committed by ocornut
parent 9e6b888626
commit 512982d0d2
2 changed files with 7 additions and 1 deletions

View File

@@ -99,6 +99,9 @@ Other Changes:
- Emscripten: added `tabindex=-1` to canvas in our shell_minimal.htm. Without it, - Emscripten: added `tabindex=-1` to canvas in our shell_minimal.htm. Without it,
the canvas was not focusable in the DOM, which in turn make some backends the canvas was not focusable in the DOM, which in turn make some backends
(e.g. pongasoft/emscripten-glfw) not receive focus loss events. (#9259) [@pthom] (e.g. pongasoft/emscripten-glfw) not receive focus loss events. (#9259) [@pthom]
- Emscripten: fixed minor rendering issues with our HTML shell. (#9281) [@ypujante]
- hidden small blue outline when canvas is focused on Chrome.
- hidden scrollbar in Firefox.
- WebGPU: fixed undefined behaviors in example code for requesting adapter - WebGPU: fixed undefined behaviors in example code for requesting adapter
and device. (#9246, #9256) [@r-lyeh] and device. (#9246, #9256) [@r-lyeh]
- GLFW/SDL2/SDL3+WebGPU: removed suport for Emscripten <4.0.10. (#9281) [@ypujante] - GLFW/SDL2/SDL3+WebGPU: removed suport for Emscripten <4.0.10. (#9281) [@ypujante]

View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
<title>Dear ImGui Emscripten example</title> <title>Dear ImGui Emscripten example</title>
<style> <style>
body { margin: 0; background-color: black } body { margin: 0; background-color: black; overflow: hidden; }
/* FIXME: with our GLFW example this block seems to break resizing and io.DisplaySize gets stuck */ /* FIXME: with our GLFW example this block seems to break resizing and io.DisplaySize gets stuck */
.emscripten { .emscripten {
position: absolute; position: absolute;
@@ -26,6 +26,9 @@
image-rendering: pixelated; image-rendering: pixelated;
-ms-interpolation-mode: nearest-neighbor; -ms-interpolation-mode: nearest-neighbor;
} }
#canvas:focus {
outline: none;
}
</style> </style>
</head> </head>
<body> <body>