image in ScrollArea jitters

[GaN601]

[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):

• OS: windows11
• Browser edge 117.0.2045.41
• Version egui 0.23.0

[GaN601]

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]

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

• video to the problem

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

[GaN601]

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

• video to the problem

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]

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]

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:

• set the content to a fixed width (as mentioned by @GaN601)
• update the ScrollBarVisibility to AlwaysVisible
• change the scrollbar type to floating

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.