2

I found during my local development that ​ was being inserted into the page. Rows of it: ​​​​​​​​​

This is a basic page, hosted on a local web server via CodeKit. However this issue also occurs when I load the page direct from the pc as file://, by double clicking on it in the explorer.

Initially, the file consisted of:

<html>
  <head>
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script>
      /* Some JS */
    </script>
  </head>
  <body>
  </body>
</html>

Im very confused, so I try adding a doctype to it <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Still no luck, then through googling I notice things about charsets, so I add UTF-8. <meta charset="UTF-8"> Ohh, its gone. But not quite. Checking the source, ​ has now changed to &#8203 but its no longer visible on the page. Also known as Zero Width Space? (after some googling).

Why is this happening?

Final code, now with the zero width space showing in Chrome Dev Tools Inspector.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript">
      /* With or without JS code in these, the issue occurs */
    </script>
  </head>
  <body>
    Hello World
  </body>
</html>

Progress: I finally removed all the JS, but leaving the script tags, and managed to narrow it down to being caused by the <script></script> tags. Even when empty. Without these, the weird characters would not show, on page or in Inspector.

Why is this happening? I know best practise is to use external JS files, but why is it happening. Very strange.

Related question can be found here for reference, which helped a little, but still does not solve it as the question is different to mine: Why is "&#8203;" being injected into my HTML?

Update 1 Oops. Rookie error. Script tag is not self closing. Changed, but the issue still persists. Corrected above final code.

Update 2 Issue fixed with workaround as per my answer below. No explanation found though as to why this happened.

Update 3 Some people are still giving votes on this so I felt I had to explain. Yes, one of the answers getting high votes outlines a typo around closing the tags. Yes, it was a typo, on my part, when copying into SO. The original code did not have self closing tags. And either way, it had no effect on the OP question which is why are these random characters appearing.

redfox05
  • 3,354
  • 1
  • 34
  • 39
  • Annoyingly, the problem does not show in the Runnable Code Snippets. Is it to do with local code? – redfox05 Jul 15 '15 at 09:59
  • 1
    The "script" tag is not "self-closing" tag. Have to be "" all the time. – paYa Jul 15 '15 at 10:03
  • Thanks. Have tried that, but issue still appears. – redfox05 Jul 15 '15 at 10:06
  • have you read http://stackoverflow.com/questions/2973698/whats-html-character-code-8203 – Jaromanda X Jul 15 '15 at 10:06
  • @JaromandaX, yep, thanks saw that. Thats how I know its Zero Width Space. But still cant work out why its happening. Im trying to see if its my editor (Sublime Text 2) but so far no luck. And the issue dissapears when I remove the tags. So then it cant be the editor right? – redfox05 Jul 15 '15 at 10:10

5 Answers5

4

You have invalid (not well formed) script part of html. You have:

<script src="https://code.jquery.com/jquery-2.1.1.min.js" />
<script>
</script>

should be:

<script src="https://code.jquery.com/jquery-2.1.1.min.js">
</script>
paYa
  • 231
  • 1
  • 7
  • Thanks for spotting the typo. But not quite right for correction. For my question, it should actually be: `` And the issue still occurs. I have tried with JS in the tags, just comments, or just blank. But still happens. Very strange – redfox05 Jul 15 '15 at 10:02
  • As I commented above, script tag must not end with "/>". Never. – paYa Jul 15 '15 at 10:04
  • `` is not valid html – Jaromanda X Jul 15 '15 at 10:04
  • @Russell it's not a typo, ``. – Claies Jul 15 '15 at 10:05
  • Ahhh, I see what I did to confuse you. My fault. In the snippet I put above, I self closed it AGAIN... but trust me, in the actual code, its correct. I have pasted that into the question again. I made the change as suggested, and STILL the issue appears. Please see the updated question. – redfox05 Jul 15 '15 at 10:14
  • So to be clear: ` ` Still causes the characters to be inserted. Remove the second pair of `` and the problem goes away, but I need the code there. – redfox05 Jul 15 '15 at 10:17
  • Strange. What editor do you use? What is the output file encoding? Did you try open the file in some hex editor and find the problem character? I can't reproduce your issue using your latest code snippet. – paYa Jul 15 '15 at 10:23
  • Im using Sublime Text 2. Turns out it was something with the file, or something with the characters. I removed all whitespace initially, but the issue still showed. I had to block by block copy the code to a new fresh file, and it worked? No more strange characters? – redfox05 Jul 15 '15 at 15:00
1

I have pasted your code into Notepad in Windows then saved it locally and browse it from FireFox and Chrome but did not see your problem.

This may be cuased by problematic jQuery loading. Try excluding loading jQuery or try to load it locally not from CDN or any online location.

You can also check this similar question: Why are these wierd characters being inserted in Facebook iframe when using jQuery? ​

Community
  • 1
  • 1
Afshar Mohebi
  • 10,479
  • 17
  • 82
  • 126
  • Thanks for testing. Yes, I tried to copy it from SO into Sublime Text as a blank fresh file, and it seems to have got rid of the issue. Very strange. I have now copied all other code out of the old file, completely replacing it, and the issue is no more. This means it must be a character encoding issue or something? Sublime is plain text, so seems odd. But, its gone now. And I think it will be one of those that cant be explained, as it cant be reproduced by others. Useful for someone else who finds this in Google in future though. – redfox05 Jul 15 '15 at 14:56
0

Self answering as I found no explanation for the strange appearances in the code, but I did find a way to fix the issue.

Copy all other code out of the old file, into a brand new blank file, block by block, completely replacing it, and the issue appears to go away.

This means it must be a character encoding issue or something? Sublime is plain text, so seems odd. But, its gone now. And I think it will be one of those that cant be explained, as it cant be reproduced by others. Useful for someone else who finds this in Google in future though. Just copy the code block by block into a new file...

Solution/Workaround fix, without a reason for why it all happened in the first place... :s

redfox05
  • 3,354
  • 1
  • 34
  • 39
  • Not sure what the etiquette is in these cases, as the solution was just to copy into a new file block by block. I don't really want to mark my answer as THE Answer, as so many people have been so helpful in trying to fix this. Should I just leave it as is, without an accepted answer? – redfox05 Jul 15 '15 at 15:02
  • 1
    I think, whereas there is no solution from any other and your answer is workaround rather a solution, I think you can just leave the topic as is. As for curiosity, do you still have the original file that caused the issue? If yes, would it be possible to place it (zipped) to some sharing server? It's really interesting problem and I would like to examine it deeper. – paYa Jul 15 '15 at 17:01
  • I guess `Sublime` is similar to `Notepad`. Your best bet is to save file in `ASCII` format. It will eliminate any `Unicode/None ASCII` characters. – Afshar Mohebi Jul 16 '15 at 05:36
  • Paya, I'll check. I think I don't have it anymore but I'll check. Thanks. Afsharm, yes I'll check those settings – redfox05 Jul 16 '15 at 06:50
  • Paya, just to close this out, unfortunately I can't find the original files with the issue still showing. Thanks for the interest though! – redfox05 Aug 27 '15 at 10:23
0

I got the same issue on a Mac: Here was the issue. I copied paste from a PDF, so I had some special characters added only displayed on the browser. the solution was to delete some characters around and retype then by hand.

JlChaudon
  • 1
0

I just had the same bug, and after severals tests, I found the reason : white line

Between the two script tags, there are invisibles chars (highlighted in blue). They came from a copy-past I made to get this Adobe analytics code. Removing these invisible chars fixed the issue.

Nitneq
  • 651
  • 10
  • 26