Giter Club home page Giter Club logo

Comments (14)

joerick avatar joerick commented on July 24, 2024 1

If anyone else is running into problems with this, I was getting an error in console
image

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.

stevenspinoza avatar stevenspinoza commented on July 24, 2024 1

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.

tapio avatar tapio commented on July 24, 2024

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.

simplesmiler avatar simplesmiler commented on July 24, 2024

May this be related to #6?

from live-server.

tapio avatar tapio commented on July 24, 2024

@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.

simplesmiler avatar simplesmiler commented on July 24, 2024

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.

hyp0xia avatar hyp0xia commented on July 24, 2024

Another confirmed case here. Pointless animation is effective as a workaround for the time being.

from live-server.

1j01 avatar 1j01 commented on July 24, 2024

👍 Perhaps the server should inject this hack.

from live-server.

harrytruong avatar harrytruong commented on July 24, 2024

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.

harrytruong avatar harrytruong commented on July 24, 2024

@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.

simplesmiler avatar simplesmiler commented on July 24, 2024

@harrytruong will test today or tomorrow.

from live-server.

simplesmiler avatar simplesmiler commented on July 24, 2024

@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.

harrytruong avatar harrytruong commented on July 24, 2024

Great, thanks. @tapio I think we can close this.

from live-server.

thejoecode avatar thejoecode commented on July 24, 2024

@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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.