use iframe z-index: -1 in resize listener (#5742)

Author: nick-vincent

src/runtime/internal/dom.ts

@@ -261,7 +261,6 @@ export function is_crossorigin() {
 
 export function add_resize_listener(node: HTMLElement, fn: () => void) {
 	const computed_style = getComputedStyle(node);
-	const z_index = (parseInt(computed_style.zIndex) || 0) - 1;
 
 	if (computed_style.position === 'static') {
 		node.style.position = 'relative';
@@ -270,7 +269,7 @@ export function add_resize_listener(node: HTMLElement, fn: () => void) {
 	const iframe = element('iframe');
 	iframe.setAttribute('style',
 		'display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; ' +
-		`overflow: hidden; border: 0; opacity: 0; pointer-events: none; z-index: ${z_index};`
+		'overflow: hidden; border: 0; opacity: 0; pointer-events: none; z-index: -1;'
 	);
 	iframe.setAttribute('aria-hidden', 'true');
 	iframe.tabIndex = -1;

test/runtime/samples/binding-width-height-z-index/_config.js

@@ -0,0 +1,7 @@
+export default {
+	async test({ assert, target }) {
+		const iframe = target.querySelector('iframe');
+
+		assert.equal(iframe.style.zIndex, '-1');
+	}
+};

test/runtime/samples/binding-width-height-z-index/main.svelte

@@ -0,0 +1,8 @@
+<script>
+	let offsetWidth = 0;
+	let offsetHeight = 0;
+</script>
+
+<div style="z-index: 42;" bind:offsetHeight bind:offsetWidth>
+	<h1>Hello</h1>
+</div>