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

Explore position fixed #669

Closed
wants to merge 2 commits into from
Closed

Explore position fixed #669

wants to merge 2 commits into from

Conversation

captbaritone
Copy link
Owner

@captbaritone captbaritone commented Oct 4, 2018

I reverted #658 because it broke a few things:

  • Automatically moving windows as you resize the browser
  • The initial layout

Take a look at the last three commits to see the fixes for these issues.

Big thanks to @1j01 for the idea to try using position: fixed for the windows. 👏

@1j01
Copy link
Contributor

1j01 commented Oct 4, 2018

position: fixed will change how the layout works tho; if you want it to still scroll with the page, you'd have to reimplement that behavior. There's no scrolling on https://deploy-preview-669--ecstatic-poincare-fe4c13.netlify.com/?useState=1 but if you add a bunch of lorem ipsum to the body, you can see the windows will stay fixed in the viewport versus scrolling with the page as on the current https://webamp.org/

@captbaritone
Copy link
Owner Author

@1j01 Very good point. Hmm. Perhaps we return the the drawing board.

@1j01
Copy link
Contributor

1j01 commented Oct 5, 2018

It's a shame the position: absolute on the container doesn't work to establish a context for position: fixed (I was gonna try that, but it's already there, and doesn't seem to do anything, even toggling it).

Wait, this approach may be salvageable yet!

#webamp {
    transform: translate(0, 0);
}

From this answer, and also mentioned here
(Might want to check browser support still)

(btw, test code: document.body.appendChild(document.createTextNode(Array(1000).fill().map(()=>"Lorem ipsum dolor sit amet")));)

@captbaritone
Copy link
Owner Author

Once again, @1j01 brilliant idea. I got it working and started testing in browsers, only to find that it does not work in Firefox.

In firefox, when you resize the browser window, the Webamp windows still end up expanding the scroll size of the window making it impossible to measure the natural size of the window.

I went ahead and pushed my, failing, changes onto this branch so others could try it out while I think about other things to try.

This ensures that their position does not influence the size of the
window.

Before the scroll size of the browser window was expanding to contain
our webamp windows, which meant we could never measure the natural size
of the window to position ourselves within it.

Thanks to @1j01 for the idea to try `position: fixed;`
This allows the individual windows to be positon: fixed and still scroll
with the window.
@captbaritone captbaritone changed the title Unrevert Serialization Explore position fixed Oct 6, 2018
@captbaritone
Copy link
Owner Author

I've rebased this PR on top of master, which includes a separate PR that unververted serialization. Now this PR is just the attempt at using position fixed for windows, so I've renamed it.

I don't think this approach will work, so I'll close it for now, but maybe we can use some of the ideas here to find a different solution.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants