Comments (14)
If anyone else is running into problems with this, I was getting an error in console
Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
The reason is that my CSS <link> tag was not in <head>, but in <body>. Moving them into <head> (as is technically correct) solved the problem.
from live-server.
Same issue as @joerick , but after looking at the DevTools, I had a Chrome extension named Night Mode Pro installed, which added two other <link> files at the top of the file. Due to to not being inside the <head> element, it popped this error, so I had to disable the extension and voila! Exception Solved!
from live-server.
Hmm, this seems like an issue with Chrome. It has worked before without hovering, and still does in Firefox 34 and Opera 12. Not sure if this can be worked around, need to take a closer look.
from live-server.
May this be related to #6?
from live-server.
@simplesmiler Nice guess, but I tested it by manually putting the code inside <body>
and disabled the injecting from live-server. However, there was no improvement.
Interestingly, I can trigger the bug with @rahmatawaludin's minimal test case code, but when I tried with a couple of my own, larger codebases it was working fine - no need to mouse hover the window. I tried to add some stuff to the minimal html/css in order to find what might "fix" it, but no luck so far. :/
from live-server.
Chrome is being either a smartypants or a dummy.
One dirty workaround I found is to apply an infinite but pointless animation:
@-webkit-keyframes livefix { from { opacity: 1; } to { opacity: 1; } }
html { -webkit-animation: livefix infinite 1s; }
from live-server.
Another confirmed case here. Pointless animation is effective as a workaround for the time being.
from live-server.
👍 Perhaps the server should inject this hack.
from live-server.
Hey, I've also confirmed this issue. I disagree with the pointless animation workaround, and I'm submitting a PR with a cleaner solution.
Chrome doesn't detect the href
change in the <link />
elements, but we can force detection by detaching <link />
from the DOM, updating the href
, and then re-attaching. No need for any crazy css.
Please see PR #49 and let me know what you guys think.
from live-server.
@rahmatawaludin @simplesmiler @Mario-M @1j01
PR #49 and #50 were merged, so chrome should working properly now. Let us know if it doesn't work?
from live-server.
@harrytruong will test today or tomorrow.
from live-server.
@harrytruong if I checkout to the 5cbb17f css seems to be refreshing just fine.
Win7 x86_64, Chrome 44.0.2403.107 m, node v0.12.5.
from live-server.
Great, thanks. @tapio I think we can close this.
from live-server.
@joerick I was running into the same issue. Thank you for the fix of moving the link tag to the head. Would be great if this could be detected or worked around in the future though.
from live-server.
Related Issues (20)
- Prevent script injection in an iframe HOT 1
- liveReload no work in WSL2
- Does not load at all
- Live-server links to local files do not work HOT 6
- https not working properly
- How can I get live-server to work with URLs that are prepended with a base URL during production builds?
- Consider moving to esm and then build for cjs HOT 2
- Install anguar app but when refresh its coming 404 error, route not working
- 'live-server' is not recognized as the name
- Should entry file flag take precedence over the index file?
- On mac, installed live-server but the main script has CRLF line terminators HOT 2
- live-server watching .git directory changes HOT 1
- live-server very slow for some reason (like 3G network) HOT 1
- Browser doesn't refresh if script tag is added
- I can't install live-server! HOT 2
- No live reload on files with no <head> HOT 1
- liveserver issue
- Parameter Routes do not work with live-server
- Track a lock file please
- Brotli/GZip support
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from live-server.