Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Slide Transition should have min-height/width set to 0 #8533

Closed
eslym opened this issue Apr 25, 2023 · 0 comments · Fixed by #14942
Closed

Slide Transition should have min-height/width set to 0 #8533

eslym opened this issue Apr 25, 2023 · 0 comments · Fixed by #14942

Comments

@eslym
Copy link

eslym commented Apr 25, 2023

Describe the bug

min-height or min-width will break the behavior of transition:slide, it will slide until the minimum value then stop

Reproduction

<script lang="ts">
    import { slide } from 'svelte/transition';
</script>
<div class="has-min-width">
    this will not slide properly
</div>
<style>
    .has-min-width {
        padding: 10px;
        color: white;
        background-color: black;
        min-height: 100px;
        height: 200px;
    }
</style>

my temporary fix:

import {
    slide as originalSlide,
    type SlideParams,
    type TransitionConfig
} from 'svelte/transition';

export function slide(node: HTMLElement, options: SlideParams = {}): TransitionConfig {
    const config = originalSlide(node, options);
    return {
        ...config,
        css: (t: number, u: number) => `${config.css!(t, u)};min-height: 0;`
    };
}

Logs

No response

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (16) x64 AMD Ryzen 7 5700G with Radeon Graphics
    Memory: 10.36 GB / 31.85 GB
  Binaries:
    Node: 18.12.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 9.4.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (112.0.1722.58)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    svelte: ^3.54.0 => 3.58.0

Severity

annoyance

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment