Unwanted output when using Twig conditional

Question

I am displaying a series of icons and associated labels in an unordered list. Some of the icons should only be displayed when a user is in a specific set of user groups, so I am using a conditional. Without the conditional, the icon and label displays perfectly, but when I wrap it in a conditional, it seems to output an extra blank character which breaks my layout.

<li class="icon">
  <a href="/entry1">
    <img src="/assets/images/icon1.svg" alt="" />
    <div class="title">Entry 1</div>
  </a>
</li>
{% if currentUser.isInGroup('admin') %}
<li class="icon">
  <a href="/entry2">
    <img src="/assets/images/icon2.svg" alt="" />
    <div class="title">Entry 2</div>
  </a>
</li>
{% endif %}

Chrome Inspector shows two quotation marks separated by a blank line between the li.icon elements, which I think indicates one blank character. When I remove the conditional, these quotation marks and the blank line don't appear, and the layout looks correct.

If I collapse all the logic and HTML elements into one long line of characters with no spaces between them, this weird blank output still occurs. Wrapping the block in the {% spaceless %} tag doesn't seem to work either.

What might be causing this?

Answer 1

I pasted your HTML into TextMate with “Show Invisible Characters” enabled, and it shows that there are two “zero width no-break space” (U+FEFF) characters in there, at the end of these lines:

{% if currentUser.isInGroup('admin') %}

-- and --

{% endif %}

Here’s a screenshot:

Those characters tend to come from code that was copied from Google+, which likes to add them at the very end of each post.

Unfortunately, Sublime Text doesn’t show these types of characters; you need to use TextMate to see them.

Answer 2

I'd venture to guess that you have a BOM character in there somewhere. It's basically an invisible character that does nothing but cause trouble. One of these can show up from copying a chunk of code from somewhere else... quite often from the Google+ group.

The solution is generally to re-type your code by hand, and delete the original offending chunk of code. You can probably narrow down the specific line or two which may contain that BOM by deleting and checking your Chrome Inspector (like you already did to determine where the issue was coming from). Then you can just re-type the one or two lines which actually contain the BOM