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(()) }