Tooltip position jumps during opacity animation on real devices (works in preview)

[Hellospa]

Problem Description

On real devices, tooltips with opacity animation experience position jumping, but work correctly in Slint Live Preview.

Reproduction Steps

1. Create a component with tooltip shown on hover
2. Tooltip uses opacity animation
3. Tooltip position is calculated based on parent and self dimensions
4. On real devices, tooltip appears at wrong position first then jumps to correct position when hovering

Minimal Reproduction Code

export component RoundButton inherits Rectangle {
    in property <image> image;
    in property <string> description : "";
    
    in property <bool> is_dark_mode: false;
    
    in-out property <color> hover_light_bg_color: #d4d4d4;
    in-out property <color> hover_dark_bg_color: #444;
    in-out property <color> light_bg_color: #ebebeb;
    in-out property <color> dark_bg_color: #333;

    callback clicked();

    border-radius: 4px;
    background: is_dark_mode ? dark_bg_color : light_bg_color;
    animate background {
        duration: 100ms;
    }

    Image {
        width: 100%;
        height: 100%;
        source: image;
        image-fit: contain;
        colorize: is_dark_mode ? light_bg_color : dark_bg_color;
    }
    Timer {
        interval: 150ms;
        running: true;

        triggered => {
            if (touch-area.has-hover) {
                parent.background = is_dark_mode ? hover_dark_bg_color : hover_light_bg_color;
            } else {
                parent.background = is_dark_mode ? dark_bg_color : light_bg_color;
            }
        }
    }
    tip := Rectangle {
        property <bool> show-tooltip: touch-area.has-hover && parent.description != "";
        
        property <length> parent-stable-width: parent.width;
        property <length> text-stable-width: desc-text.preferred-width + 5px;
        property <length> text-stable-height: desc-text.preferred-height + 5px;

        visible: show-tooltip;
        width: text-stable-width;
        height: text-stable-height;
        border-radius: 4px;
        background: is_dark_mode ? dark_bg_color : light_bg_color;
        x: (parent-stable-width - text-stable-width) / 2;
        y: parent.height + 5px;
        
        opacity: show-tooltip ? 1 : 0;
        animate opacity, x, y, width, height {
            duration: 250ms;
            easing: ease-in-out;
        }

        desc-text := Text {
            text: root.description;
            font-size: 14px;
            color: is_dark_mode ? light_bg_color : dark_bg_color;
            horizontal-alignment: center;
            vertical-alignment: center;
        }
    }

    touch-area := TouchArea {
        width: 100%;
        height: 100%;

        mouse-cursor: MouseCursor.pointer;

        clicked => {
            clicked()
        }
    }
}

Environment Information

• Slint Version: [slint: 1.14.1, slint build: 1.14.1]
• Operating System: Windows 11
• Build Configuration: Release

Attempted Solutions

1. Pre-calculating text dimensions ❌
2. Using fixed layout ❌
3. Manual animation timing control ❌
4. Completely disabling animation ✅ (but this is not ideal)

Expected Behavior

Tooltip should fade in smoothly from the correct position without any position jumping.

Actual Behavior

Tooltip appears at offset position when animation starts, then jumps to correct position during animation.

Additional Notes

• Problem only occurs when opacity animation is enabled
• Removing opacity animation fixes the issue but provides poor UX
• Both tooltip container and text content jump together, indicating it's a positioning issue
• Multiple standard UI workarounds have been tried without success
• Works correctly in Slint Live Preview but fails on real devices

[CarbonPool]

I also encountered this problem, but it disappeared when I switched to the Skia backend.

[ogoffart]

Maybe related to #10078