[SOLVED] Lost <div> "id" for iOS

Hi guys,

I’m new to F7 and excited to get started. Here is my first question on the Framework7 v4 beta.26

I setup F7 using the PWA template (single view) and added an “id” to the navbar

, called “navbar-id”
<div id="navbar-id" class="navbar">
  <div class="navbar-inner">
    <div class="left">

Now I’m trying to retrieve the height of the

in javascript using the following:
let navbarHeight = document.getElementById(‘navbar-id’).offsetHeight;

Using Chrome DevTools I emulate the mobiles and it works with Android devices. It finds the element by id normally, and when I look at the html tree, I can see everything as defined above.

For iOS, when I switch to any iPhone device and reload the app, the “id” is “lost” in the html tree and then of course my javascript fails to get the element and the height.

I used javascript before and that’s the first time I see this. I tried of course to cleanup everything, clear cache, delete/recreate service workers, etc. and nothing works, I’m a little clueless.
I checked and saw the “navbar-id” in the app.js in network/service-worker but the html tree is wrong.

If you have an idea let me know

The worst is that when I just switch to an Android device and reload the page, the html tree is correct.
Switching back to IPhone and reloading just loads an invalid tree, it’s like… magic… :slight_smile:

Something else to notice, I have 2 “navbar” elements and when switching between Android/iPhone I can see in the html tree that the elements are not in the same order.
In case of IPhone, the 2

elements do not have the “id” attribute set. In case of Android, one of them has, as expected.
Could it be related to the way the tree is loaded in memory ? (I have no clue what I’m talking about here, just trying to give clues for someone with more knowledge)

Don’t set ID on navbar element, iOS theme will only reuse internal navbar-inner, you can set ID on it

Thanks @nolimits4web for the fast reply, it worked.

“Magic” workaround :slight_smile: