Regression (between 1.8.6 and 1.9.0): styles not loading on hx-boost

aral commented 1 year ago

Update 2: The regression was introduced here:

https://github.com/bigskysoftware/htmx/blame/2eaa9023102fdd59f80587a11d97df6ac56fa5e3/src/htmx.js#L285

Removing && partialResponse from the conditional check there reverts the behaviour to what it was in 1.8.6.

@1cg, when you get a chance, could you please take a look at this as as it appears to be a side-effect of the “do not use template parsing for full body response content” fix.

(I’m happy to prepare a pull request but I don’t want to just revert that change without understanding why it was introduced and what else it might affect, etc.)

Update: I’ve narrowed this regression down further: It was introduced in 1.90 and is there in 1.9.4.

Summary

There’s a breaking change in the behaviour of hx-boost between htmx version 1.8.6 and 1.9.4 that means that styles in the <head> of the loaded page are not applied unless the page is manually reloaded to trigger a full page refresh.

To reproduce

Here are two plain HTML files that you can run with any web server (I used Kitten but that shouldn’t matter) to reproduce the issue:

index.html

<!DOCTYPE html>
<html lang='en'>
  <head>
    <title>htmx regression test - home page</title>
    <style>
      ul { padding: 0; }
      li {
        list-style-type: none;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <div hx-boost=true>
      <nav>
        <ul>
          <li>Home</li>
          <li><a href='/other-page'>Other page</a></li>
        </ul>
      </nav>
      <main>
        <h1>Home page.</h1>
      </main>
    </div>
  </body>
  <script  src="https://unpkg.com/htmx.org@1.8.6"></script>
  <script>
    htmx.config.useTemplateFragments = true
  </script>
</html>

other-page.html

<!DOCTYPE html>
<html lang='en'>
  <head>
    <title>htmx regression test - other page</title>
    <style>
      ul { padding: 0; }
      li {
        list-style-type: none;
        display: inline-block;
      }

      h1 { color: green; }
    </style>
  </head>
  <body>
    <div hx-boost=true>
      <nav>
        <ul>
          <li><a href='/'>Home</a></li>
          <li>Other page</li>
        </ul>
      </nav>
      <main>
        <h1>Other page.</h1>
      </main>
    </div>
  </body>
  <script  src="https://unpkg.com/htmx.org@1.8.6"></script>
  <script>
    htmx.config.useTemplateFragments = true
  </script>
</html>

Serve index.html and click on the Other Page link.
Note that the heading is green (as it should be).
Change the version of the htmx script to 1.9.4 in both pages.
Do the same thing.

What should happen

The behaviour should be the same as in 1.8.6 (the heading should turn green).

What actually happens

The heading stays black (or whatever the default colour is for headings in your browser/settings). If you reload the page, the heading displays correctly.

Other peculiarities

If htmx.config.useTemplateFragments = true is removed in 1.8.6, the behaviour matches what happens in 1.9.4 when htmx.config.useTemplateFragments = true is present.

Original issue

Originally encountered because upgrading from 1.8.6 to 1.9.4 broke the rendering of pages in Domain, which is powered by Kitten, which has native support for htmx:

https://codeberg.org/kitten/app/issues/114

1cg commented 1 year ago

hey @aral sorry for the regression

i didn't realize that styles were being processed when template parsing was being used for full body requests

unfortunately manual the test that I added to demonstrate the issue w/ full body requests doesn't really show me anything: it looks like it works fine if I comment out that condition

i'm going to debug it a bit and see if I can jar a memory as to why I did this, but, regardless, we shouldn't break something in the 1.x line so I will revert it for the next release

in 2.0 i hope to have a more sophisticated handling of the head element in general

aral commented 1 year ago

@1cg Thanks so much + no worries at all. These things happen. I can break three things before breakfast most days ;P

1cg commented 1 year ago

OK I have looked into this more.

The old behavior was a bug in the following sense: some head elements are parsed as being within the body, when they aren't. This means that the inline

bigskysoftware / htmx