diff --git a/docs/index.html b/docs/index.html
index 1bbec85c..f7659c40 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -27,15 +27,15 @@
padding: 0 !important;
}
- /* Center canvas vertically and horizontally: */
+ /* Position canvas in center-top: */
canvas {
margin-right: auto;
margin-left: auto;
display: block;
position: absolute;
- top: 50%;
+ top: 0%;
left: 50%;
- transform: translate(-50%, -50%);
+ transform: translate(-50%, 0%);
}
diff --git a/egui_web/src/lib.rs b/egui_web/src/lib.rs
index 1ea9dd69..95b92919 100644
--- a/egui_web/src/lib.rs
+++ b/egui_web/src/lib.rs
@@ -135,16 +135,29 @@ pub fn resize_canvas_to_screen_size(canvas_id: &str) -> Option<()> {
let canvas_size_pixels = canvas_size_pixels.min(max_size_pixels);
let canvas_size_points = canvas_size_pixels / pixels_per_point;
+ // Make sure that the height and width are always even numbers.
+ // otherwise, the page renders blurry on some platforms.
+ // See https://github.com/emilk/egui/issues/103
+ fn round_to_even(v: f32) -> f32 {
+ (v / 2.0).round() * 2.0
+ }
+
canvas
.style()
- .set_property("width", &format!("{}px", canvas_size_points.x))
+ .set_property(
+ "width",
+ &format!("{}px", round_to_even(canvas_size_points.x)),
+ )
.ok()?;
canvas
.style()
- .set_property("height", &format!("{}px", canvas_size_points.y))
+ .set_property(
+ "height",
+ &format!("{}px", round_to_even(canvas_size_points.y)),
+ )
.ok()?;
- canvas.set_width(canvas_size_pixels.x.round() as u32);
- canvas.set_height(canvas_size_pixels.y.round() as u32);
+ canvas.set_width(round_to_even(canvas_size_pixels.x) as u32);
+ canvas.set_height(round_to_even(canvas_size_pixels.y) as u32);
Some(())
}