About Ionic duplicating some HTML elements


Ionic dupicates some HTML elements in order to (I believe) achieve smoother transitions.
For instance (there may be others), in an ionNavBar it duplicates its content in 2 blocks such as these, and one only is visible except during transitions:

<div nav-bar="active" class="nav-bar-block"> ... </div>
<div nav-bar="cached" class="nav-bar-block"> ... </div>

This seems quite smart, but I’m concerned with the drawbacks it implies:

  • An element with an HTML ID will be duplicated. I believe having 2 elements with the same ID in the DOM is forbidden in the HTML spec. Using document.getElementById will only return one of these elements.
  • I created a directive that listens for an event on the document: document.addListener(‘menubutton’, …) . As Ionic duplicates the content of the navbar, my event listener is attached twice, and fired twice whenever it fires.
  • Performance-wise, Angular has twice as many watchers to maintain for the code in navbars. That doesn’t sound so great.
  • There are probably some other issues I haven’t thought of yet or encountered.

Have these issues been considered ? Is there a way to deal with this, or should we consider not duplicating the templates any more for future Ionic versions ?


Is there any Ionic people here to comment ?

Acknowledging the problem (or not !) would be a good first step.

Reported the issue on github…


The team’s reply there was very disappointing. That’s not a bug in their opinion, and the fact HTML basics like getElementById or DOM events won’t work as expected doesn’t even deserve a mention in the docs ?!

Others will find the same bug, and they will lose time on it unnecessarily.

I expect more from the frameworks I pick for production apps. Maybe that’s not what Ionic is about.

In the latest blog post Ionic explains they changed how the icons work because :

We had to face the facts: Animated Font Icons Were Not An Ideal Solution.

Maybe somebody will realize the current behaviour of duplicating templates, and not documenting its side effects, is not ideal either ?

I’m having the same problem, added a comment to your GitHub issue. - rajat

I really can’t believe how incomplete and full of bugs this framework is, this one in particular breaking common DOM behaviour is terrible, and it looks like they don’t even care about it. I’d just say to people to leave while they can, I’m in the middle of a project and can’t extirp it out of the code for now, it stands like a cancer in there, giving new bugs every now and then.

1 Like