Describe the bug
I am using transition:slide in order to slide in a div element after the user presses the button with the arrow pointing down. With Chrome and Firefox on Windows it looks perfect, however on Safari (iPadOS) the inner contents overlap with the button during the transition. Or to be more precise, the inner elements of #lookupAreaContent do not follow the behavior of #lookupAreaContent itself.

To Reproduce
Simplified version:

<div>
	{#if v_lookupArea}
	<div id="lookupAreaContent" transition:slide>
		<div>
			<a href="https://www.google.com" target="_blank">test 1.</a>
		</div>
		<div>
			<a href="https://www.google.com" target="_blank">test 2.</a>
		</div>
		<div>
			<i>add_circle</i>
		</div>
	</div>
	{/if}
	<i on:click={toggleLookupArea}>expand_more</i>
</div>

<script>
import { slide } from "svelte/transition";
let v_lookupArea = false;

function toggleLookupArea(e) {
	v_lookupArea = !v_lookupArea;
}
</script>

Expected behavior
Here is what it looks like on Chrome: https://streamable.com/crvf1n
And here is the buggy Safari behavior: https://streamable.com/ldb1gh

Information about your Svelte project:

• Your browser and the version: Chrome 81 (correct), Safari (broken)

• Your operating system: Windows 10 (correct), iPadOS 13.4.1 (broken)

• Svelte version (Please check you can reproduce the issue with the latest release!): 3.20.1

• Whether your project uses Webpack or Rollup: Rollup

Severity
It is just a design flaw, nothing major.