Invisible character rendered between Twig includes

Question

I have a weird issue with a Twig include that's rendering some invisible character on my HTML. I've tried googling it in a thousand different ways, but couldn't find anyone with a similar issue. In fact, I'm not even sure if it's related to Twig or Symfony or what, so I'm not sure what I need to look for. I'll try m

At two different points in one of my views, I use a for loop to render each li by includeing a separate twig file, each time with a different set of arguments. The two loops are:

<ul class="search-results">
    {% for entity in entities %}
        {% include 'SomeBundle:Users:renderUserResults.html.twig' with {'entity':entity, 'callType':0} %}
    {% endfor %}
</ul>

and

<ul class="search-results">
    {% for entity in entities %}
        {% include 'SomeBundle:Users:renderUserResults.html.twig' with {'entity':entity, 'time_search':time_search, 'time_meeting_search':time_meeting_search} %}
    {% endfor %}
</ul>

The apparently relevant content of renderUserResults.html.twig is just:

{% set role = common.roleClass(entity.type)|trim %}
<li class="{{ role }}">
    // a bunch of html
</li>

---

However, the generated code has a weird difference between both cases. In the first one, all the li elements are generated just fine, one after another, with just some spaces between them that are ignored by the browser. But in the second one, the Chrome Web Inspector shows some non-collapsing space before every li, like this:

And when right-clicking on one of those spaces and selecting "Edit as HTML", this red dot appears:

That space is preventing the top and bottom margins of each li from collapsing (lis are rendered as a column of boxes), and therefore creating additional space which I don't want. I can't show a screenshot of the rendered list, so I hope I provided enough information.

---

So the bottom line is, I need to get rid of those red dots, but I have no idea why or where they are being created. As you can see, the only difference between the two cases is the set of parameters passed with the include, but I fail to see how that can cause a strange character to appear. I already tried using {% spaceless %} tags everywhere, and also manually deleting all spaces and line breaks in the twig files, but none of them worked. Manually deleting the red dots in the web inspector makes all the spaces between html tags to collapse again, but of course that's not an option.

Answer 1

These are symptoms that your file contains an utf8 Byte Order Mark. It renders as an invisible character and can easily break php code, it is recommended you always save utf8 files without the BOM - all recent editors support this.