emilk / egui

egui: an easy-to-use immediate mode GUI in Rust that runs on both web and native
https://www.egui.rs/
Apache License 2.0
22.24k stars 1.6k forks source link

image in ScrollArea jitters #3455

Open GaN601 opened 1 year ago

GaN601 commented 1 year ago
[dependencies]
egui = "0.23.0"
eframe = { version = "0.23.0", default-features = false, features = [
    "accesskit",    
    "default_fonts",
    "glow",          
    "persistence",   
] }
egui_extras = { version = "0.23.0",features = ["all_loaders"] }
image = { version = "0.24", features = ["jpeg", "png"] }

fn gen_image<'a>() -> Image<'a> {
    Image::new("file://assets/icon-256.png")
        .max_width(42.0)
        .rounding(10.0)
}
pub(crate) fn default(app: &mut TemplateApp, ctx: &Context) -> InnerResponse<()> {
    egui::SidePanel::left("left_panel_1")
        .width_range(Rangef::new(20.0, 50.0))
        .show(ctx, |ui| {
            egui::ScrollArea::vertical().show(ui, |ui| {
                ui.add(gen_image()).on_hover_text("item 1");
                ui.add(gen_image()).on_hover_text("item 2");
                ui.add(gen_image()).on_hover_text("item 3");
                ui.add(gen_image()).on_hover_text("item 4");
                ui.add(gen_image()).on_hover_text("item 5");
                ui.add(gen_image()).on_hover_text("item 6");
                ui.add(gen_image()).on_hover_text("item 7");
                ui.add(gen_image()).on_hover_text("item 8");
                ui.add(gen_image()).on_hover_text("item 9");
                ui.add(gen_image()).on_hover_text("item 10");
                ui.add(gen_image()).on_hover_text("item 11");
                ui.add(gen_image()).on_hover_text("item 12");
                ui.add(gen_image()).on_hover_text("item 13");
                ui.add(gen_image()).on_hover_text("item 14");
                ui.add(gen_image()).on_hover_text("item 15");
            });
        })
}

https://github.com/emilk/egui/assets/80253667/1b234868-5b7e-4f41-8f74-8626da1ed761

Desktop (please complete the following information):

GaN601 commented 1 year ago

I fixed it by setting the image to a fixed size, if you think this is not a bug, please just close the issue

AHeimberger commented 1 year ago

I am facing the same issue. I am currently working through the example section of egui. https://github.com/emilk/egui/blob/master/examples/images/src/main.rs

Desktop (please complete the following information): OS: ubuntu 22.04 Version egui: 0.23.0

GaN601 commented 1 year ago

I am facing the same issue. I am currently working through the example section of egui. https://github.com/emilk/egui/blob/master/examples/images/src/main.rs

Desktop (please complete the following information): OS: ubuntu 22.04 Version egui: 0.23.0

you can use Image::new("file://assets/icon-256.png").fit_to_exact_size(Vec2::new(42.0, 42.0)) Fixed image size avoids this problem

Coffee-Nerd commented 7 months ago

This happens with ScrollArea in general, not just images in ScrollArea. I've been having issues with this for text as well. I thought it was tied to scroll_to_bottom, but it may not be... I saw another issue here where the scrollbar can go beyond its intended bounds, https://github.com/emilk/egui/issues/3734, which may be tied to this issue as well.

lucasmerlin commented 1 week ago

I think this is caused by the following feedback loop:

  1. the content is larger than the scroll area
  2. the scrollbar is shown
  3. the content resizes (because the scrollbar takes some width)
  4. the content is now smaller than the scroll area
  5. the scrollbar is hidden
  6. the content resizes (because now there is more space without the scroll area)
  7. repeat at step 1

So any of the following things could work:

I think to fix this in egui we'd need some way to detect if this flickering is currently occuring and then decide to either show or hide the scrollbar until the content or scroll area size changes again.