search

tapio / live-server

A simple development http server with live reload capability.
http://tapiov.net/live-server/
4.43k stars 484 forks source link

Page moves up after save css file. #241

Open claudiney opened 6 years ago

claudiney commented 6 years ago
Before submitting an issue, please, see https://github.com/tapio/live-server#troubleshooting

Issue description

When I save the CSS file, the browser refresh and the page moves up, losing focus. I'm not sure if this is a expected issue or is a bug, but only occurs with css files. Js and html files update ok.

Software details

BraisC commented 6 years ago

I'm having the exact same problem and I can't found a solution or alternative that works as expected, so for the time being i ended using Prepros, not ideal :/

Would appreciate some solution to this.

In my case i am using Firefox on Win10

hudsonsilvaoliveira commented 6 years ago

Hey @claudiney @BraisC any news on that? I've noticed this in my tests as well. The most curious thing is that for HTML, the page don't move at all, you just lose the position of the page if you're working with CSS.

A buddy of mine found a workaround for this. He noticed that the page don't go all the way to the top, it just move up a little bit. That happens coz when the page reloads, live-server removes the css and put the new one. When it removes the css, all the height you put on your css is lost and that page shrinks a little bit and when the new css is set, you end up in the position your page were when you had no height set.

The workaround is basead on setting a height on the body of you page. Like this:

Now, even if live-server removes your css, your page will still keep the height, preserving the scroll position. I don't know how to implement this on the package, but maybe getting the body height, then setting it to the body tag, and after que reload removing it, could work.