Why the custom cookie banner sticks with the page when you click sub-headings? #6788

syeda-git · 2024-02-16T14:05:55Z

syeda-git
Feb 16, 2024

Hi,
On this page, scroll down to the bottom. Don't click Accept All Cookies button.
Now click on a sub-heading that appears at the right-side of the page.
Notice that now you can scroll down further after the footer. The entire cookie banner sticks with the page. If you reload the page, it appears fine.

Follow the same process on this page. The issue is not there. The difference between these two pages is the Material for Mkdocs version. The first one was built with 9.5.6 and the later one with 9.1.1.

Did anything change in the cookie code after 9.1.1 that's impacting custom cookie?

I am using cookie script in analytics.html in the partials folder.

Answered by kamilkrzyskow

Feb 19, 2024

Here is a more targeted example to your needs @syeda-git:
issues-instant.zip

In the extra.js write:

https://squidfunk.github.io/mkdocs-material/customization/#additional-javascript

let __gStyles;

// Subscribe to the document$ to know that there was a site reload
// Restore the removed style from the global variable
window.document$.subscribe(function() {
    if (!__gStyles) return;
    if (document.head.querySelector("#onetrust-style")) return;
    document.head.insertAdjacentElement("beforeend", __gStyles);
})

// Subscribe to the location$ to know that the location change was invoked
// On first location change get the style (it's not removed yet) and assign it to the global variable
w…

View full answer

kamilkrzyskow · 2024-02-16T21:49:15Z

kamilkrzyskow
Feb 16, 2024
Collaborator

Hello @syeda-git,
I see that the cookie consent approval box is provided by onetrust, so a 3rd party. The box floating box is added via their script and then the onetrust-style <style> tag is added to provide styling for it.

After you click on a sub-heading the onetrust-style is removed from the <head>, and without the styling the box just "spills out" and is not floating. So either it's an issue with the onetrust 3rd party logic or I believe this is some kind of issue with Instant Loading, but I'm not sure why it would delete it. Looking at the https://squidfunk.github.io/mkdocs-material/changelog/ a lot of changes to instant navigation were made after 9.1.1.

So try disabling Instant Navigation or perhaps there is a way to hook the instant loading with the location$ observable, similar to this example https://squidfunk.github.io/mkdocs-material/setup/setting-up-site-analytics/#usage and re-add the onetrust-style, but I'm not sure.
Another method, aka quick fix, would be to permanently save the inline styling to a file onetrust.css and add it to the site:
https://squidfunk.github.io/mkdocs-material/customization/#additional-css

2 replies

kamilkrzyskow Feb 16, 2024
Collaborator

Reading the source I think that perhaps there is a bug here, because before there were some checks preventing removal of some tags. The checks didn't really cover the current case, so just a guess:

mkdocs-material/src/templates/assets/javascripts/integrations/instant/index.ts

Lines 207 to 209 in b7fc7ba

    
           // Remove meta tags that are not present in the new document 
        
           for (const el of tags.values()) 
        
             el.remove()

The changes were made last month in 9.5.5
So try with 9.5.4 to see if the issue was there.

@squidfunk the 3rd party javascript adds a <style> tag to the <head> and if you select an internal heading link the <style> is removed. Is that a bug or should the user somehow hook the location$ observable and re-add it again 🤔 ?

squidfunk Feb 17, 2024
Maintainer

You're right that we changed replacement of tags in the header in 9.5.5. This was necessary, because authors might change tags or templates in between instant navigation pages, and the tags needed to be correctly replaced, which they were not before, as reported. My recommendation would be to study the issues that were solved with this release:

If you need to persist or re-add styles upon instant navigation, the way to do it is to execute your script as part of a subscription on the document$ observable, similar to how this is done for data tables:

document$.subscribe(function() {
  var tables = document.querySelectorAll("article table:not([class])")
  tables.forEach(function(table) {
    new Tablesort(table)
  })
})

We are currently planning a re-vamp of our documentation and a guide on how to interface with instant navigation will be part of that. I apologize that our documentation is currently lacking more instructions on that, as I was lacking the time to put that together. This should be taken care off in the next months.

syeda-git · 2024-02-19T07:23:51Z

syeda-git
Feb 19, 2024
Author

@squidfunk @kamilkrzyskow It seems that the issue has been there since 9.4.2. I don't see the issue in 9.4.1.
Given this case, would you recommend anything?

6 replies

squidfunk Feb 19, 2024
Maintainer

Yes, please read #6788 (reply in thread) to learn how to integrate external scripts with instant navigation. If that does not work, please provide more information what exactly does not work. It might also be a good idea to ask the creator of the external script for help, because we don't know what this scripts does, so we can only guess.

squidfunk Feb 19, 2024
Maintainer

Additionally, please note that we are a very small team of people trying to maintain this project, and we can only offer limited support for integrating external scripts with Material for MkDocs. Our community experts and contributors do their absolute best to help you and your company for free, but please understand that there is also a limit to the free support that we can offer. After all, this is an Open Source project that is largely provided free of charge.

Your company might also consider sponsoring the project. Thank you for understanding.

kamilkrzyskow Feb 19, 2024
Collaborator

Here is a more targeted example to your needs @syeda-git:
issues-instant.zip

In the extra.js write:

https://squidfunk.github.io/mkdocs-material/customization/#additional-javascript

let __gStyles;

// Subscribe to the document$ to know that there was a site reload
// Restore the removed style from the global variable
window.document$.subscribe(function() {
    if (!__gStyles) return;
    if (document.head.querySelector("#onetrust-style")) return;
    document.head.insertAdjacentElement("beforeend", __gStyles);
})

// Subscribe to the location$ to know that the location change was invoked
// On first location change get the style (it's not removed yet) and assign it to the global variable
window.location$.subscribe(function() {
    let style = document.head.querySelector("#onetrust-style");
    if (!style) return;
    if (__gStyles) return;
    __gStyles = style;
})

The script assumes that the style tag id will be onetrust-style, also it assumes that the tag isn't purged and can be assigned to a global variable without a deep copy. I don't know if it's intentional that it's not removed completely from memory 🤔

List of all observables can be found here:

mkdocs-material/src/templates/assets/javascripts/bundle.ts

Lines 304 to 318 in 41d5633

    
           /* ---------------------------------------------------------------------------- 
        
            * Exports 
        
            * ------------------------------------------------------------------------- */ 
        
           window.document$  = document$          /* Document observable */ 
        
           window.location$  = location$          /* Location subject */ 
        
           window.target$    = target$            /* Location target observable */ 
        
           window.keyboard$  = keyboard$          /* Keyboard observable */ 
        
           window.viewport$  = viewport$          /* Viewport observable */ 
        
           window.tablet$    = tablet$            /* Media tablet observable */ 
        
           window.screen$    = screen$            /* Media screen observable */ 
        
           window.print$     = print$             /* Media print observable */ 
        
           window.alert$     = alert$             /* Alert subject */ 
        
           window.progress$  = progress$          /* Progress indicator subject */ 
        
           window.component$ = component$         /* Component observable */

Answer selected by syeda-git

syeda-git Feb 20, 2024
Author

Thanks @kamilkrzyskow for the fix. It worked internally. I will post on production and let you know.

kamilkrzyskow Mar 3, 2024
Collaborator

Hey @syeda-git I saw that the commit: HCL-TECH-SOFTWARE/digital-experience@04184ea
was made. It copies the whole "mimic" part which should be redundant, since on your site the onetrust logic does add the style tag, there is no need for mimicry.

I would also appreciate if the mention of this discussion or a direct attribution to me would be included in a comment next to the solution (or the commit message/description this ship has sailed) ✌️

syeda-git Mar 4, 2024
Author

Thanks @kamilkrzyskow
HCL-TECH-SOFTWARE/digital-experience@04184ea#commitcomment-139317821

Uh oh!

Why the custom cookie banner sticks with the page when you click sub-headings? #6788

Uh oh!

syeda-git Feb 16, 2024

Replies: 2 comments · 8 replies

Uh oh!

Uh oh!

kamilkrzyskow Feb 16, 2024 Collaborator

Uh oh!

Uh oh!

kamilkrzyskow Feb 16, 2024 Collaborator

Uh oh!

squidfunk Feb 17, 2024 Maintainer

Uh oh!

syeda-git Feb 19, 2024 Author

Uh oh!

squidfunk Feb 19, 2024 Maintainer

Uh oh!

squidfunk Feb 19, 2024 Maintainer

Uh oh!

kamilkrzyskow Feb 19, 2024 Collaborator

Uh oh!

syeda-git Feb 20, 2024 Author

Uh oh!

kamilkrzyskow Mar 3, 2024 Collaborator

Uh oh!

syeda-git Mar 4, 2024 Author

syeda-git
Feb 16, 2024

Replies: 2 comments 8 replies

kamilkrzyskow
Feb 16, 2024
Collaborator

kamilkrzyskow Feb 16, 2024
Collaborator

squidfunk Feb 17, 2024
Maintainer

syeda-git
Feb 19, 2024
Author

squidfunk Feb 19, 2024
Maintainer

squidfunk Feb 19, 2024
Maintainer

kamilkrzyskow Feb 19, 2024
Collaborator

syeda-git Feb 20, 2024
Author

kamilkrzyskow Mar 3, 2024
Collaborator

syeda-git Mar 4, 2024
Author