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

OuterWidth doesn't always update when resizing the window through fullscreen or maximizing #6098

Open
jguze opened this issue Mar 19, 2021 · 2 comments

Comments

@jguze
Copy link

jguze commented Mar 19, 2021

Describe the bug
It appears the binding on the window for outerWidth doesn't update when you maximize the window, or go fullscreen. Note that this doesn't happen on all browsers. It appears certain actions simply don't trigger outerWidth to update. More specifically, if I run <svelte:window bind:outerWidth />, I do not see it update if I fullscreen or maximize the window.

I'm on a Mac, and I find this happening only on specific browers: Chrome and Safari. It appears it cannot be reproduced on Firefox.

I've noticed it's actually only semi-consistent on Chrome, but it 100% consistent on Safari.

To Reproduce

  1. Use either Safari or Chrome (It's easily repro'd on Safari)
  2. Go to https://svelte.dev/repl/867c433fd36a463fa5bb257cec2c1766?version=3.35.0
  3. Manually resize the window to about half your screen. Take note of the OuterWidth value
  4. Either Fullscreen the window (On Mac, you would hit the green Fullscreen button in the top left), or maximize the window by double clicking the window's chrome
  5. Notice that the OuterWidth value has not updated, but all other window bindings have.

Expected behavior
The outer width successfully updates for maximize and fullscreen operations

Information about your Svelte project:

  • Your browser and the version: Chrome 89.0.4389.90, Safari 14.0.3

  • Your operating system: OS X 10.15.7

  • Svelte version 3.35.0

Severity
Not too severe. There's an easy workaround to just listen for media query changes. Alternatively, innerWidth updates fine, so you could arguably react to innerWidth, and simply read window.outerWidth at that time with something like:

<script>
  $: innerWidth: number;
  $: outerWidth = typeof innerWidth === 'number' ? window.outerWidth : 0; 
</script>

<svelte:window bind:innerWidth />

Additional context
I'm happy to try and fix it myself but I'm not quite sure where this specific code lives

@stale
Copy link

stale bot commented Jun 26, 2021

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

@stale stale bot added the stale-bot label Jun 26, 2021
@stale stale bot removed the stale-bot label Jun 26, 2021
@stale stale bot removed the stale-bot label Jun 27, 2021
@stale
Copy link

stale bot commented Dec 24, 2021

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

@stale stale bot added the stale-bot label Dec 24, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants