Barba: New content appended to wrapper rather than replacing container

Created on 3 Jan 2020 · 5Comments · Source: barbajs/barba

The problem

I had barba/core working as expected. Then I installed barba/css and ran into problems with fetched content being appended to my barba wrapper rather than replacing my barba container as I expected.

Description

My markup looks like this:

@if(!isset($_SERVER['HTTP_X_BARBA']))
  <body>
    <div id="app" data-barba="wrapper" role="document">
      <header>My header content</header>
@endif

      <main data-barba="container" data-barba-namespace="{{ basename( get_permalink() ) }}">
        @yield('content')
      </main>

@if(!isset($_SERVER['HTTP_X_BARBA']))
      <footer>My footer content</footer>
      ### FETCHED CONTENT IS APPEARING HERE ###
    </div>
  </body>
@endif

When I navigate to a new page without barba/css it works as expected. When using barba/css, however, my new content appears where I've indicated in the markup. The previous page content is removed however, I do not see duplicate content.

The javascript calling Barba is very simple. I was originally running Barba with barba.init();. To use the CSS module I changed this to:

  barba.use(barbaCss);
  barba.init();

BarbaCSS is installed and I've verified this to be working by adding some simple opacity transitions between pages. I don't see any console messages.

Environment

Barba version that exhibits the issue: @barba/core@^2.9.6, @barba/[email protected]
Build used: import from node_modules
Browser OS/version used: Chrome 79.0.3945.88 on OS X Mojave

@barbcss bug

Source

johnpuddephatt

Most helpful comment

Same here. For now I moved the footer inside the container but would love to avoid the get-around. However thank you very much for barba.js, it is fun to use!

ouun on 14 Jan 2020

👍4

All 5 comments

Note this still occurs if I remove the conditionals checking if $_SERVER['HTTP_X_BARBA'] is set.

johnpuddephatt on 3 Jan 2020

I've created a minimum example and uploaded to GitHub and published it with GitHub pages. Hopefully this will help – I feel like I must be doing something wrong but for the minimum example I've copied code straight from the legacy page on the site and am still seeing the same problem.

Repository: https://github.com/johnpuddephatt/barba-test
Public URL: https://johnpuddephatt.github.io/barba-test/index.html

This demo loads Barba core and css from unpkg. It runs barba with:

barba.use(barbaCss);
barba.init();

The problem is as before: page content ends up beneath the footer.

johnpuddephatt on 9 Jan 2020

Same here. For now I moved the footer inside the container but would love to avoid the get-around. However thank you very much for barba.js, it is fun to use!

ouun on 14 Jan 2020

👍4

I'm having the same issue,
For some reason I get two containers and after the first click, only one container is updated.
This would be my DOM:

div[data-barba="wrapper"]
  div[data-barba="container" class="barba-container"

After the first click, the dom changes and appends a second container with the second page.

div[data-barba="wrapper"]
  div[data-barba="container" class="barba-container"
  div[data-barba="container" class="barba-container"

The thing is that after the second click, the second container would be updated as expected instead of adding a third container.

I think that i should get rid of the extra container with JS, but im not sure and I also i cant find any simple hideshow example for barba v2 as it was on v1

thanks

gsabater on 3 Mar 2020

I recently discussed about this issue with @thierrymichel, and it should work the same way as @barba/core works. So it will be fixed in a future release, be patient :wink: