Here is a
Modify HTTP Response filter that should get the page layout in workable condition for you:
Code: Select all
[["www.loctiteproducts.com",["/.*treeshaking\\.lc-.*-lc\\.min\\.js.*/",["/^/","(function(){if(window.__pmLoctiteFixBootstrapped){return;}window.__pmLoctiteFixBootstrapped=true;if(typeof Element!==\"undefined\"&&!Element.prototype.checkVisibility){Element.prototype.checkVisibility=function(o){o=o||{};var s=getComputedStyle(this);if(!s||s.display===\"none\"||s.contentVisibility===\"hidden\"||!this.getClientRects||this.getClientRects().length===0){return false;}if((o.checkOpacity||o.opacityProperty)&&parseFloat(s.opacity)===0){return false;}if((o.checkVisibilityCSS||o.visibilityProperty)&&(s.visibility===\"hidden\"||s.visibility===\"collapse\")){return false;}return true;};}function classText(el){try{return String(el.className||\"\");}catch(e){return \"\";}}function hasClass(el,name){return (\" \"+classText(el)+\" \").indexOf(\" \"+name+\" \")!==-1;}function isInsideFooter(el){var p=el;while(p&&p!==document){if(p.tagName===\"HELIUX-FOOTER\"||hasClass(p,\"cmp-experiencefragment--footer\")){return true;}p=p.parentNode;}return false;}function isExcludedComponent(el){var tag=el.tagName;return tag===\"HELIUX-HEADER\"||tag===\"HELIUX-FOOTER\"||tag===\"HELIUX-BACKTOTOP\"||tag===\"HELIUX-NAV-ADJUSTABLE\"||tag===\"HELIUX-NAVIGATION\"||tag===\"HELIUX-DESKTOPNAV\";}function repairFooter(){var containers=document.querySelectorAll(\".cmp-experiencefragment--footer .section__content\");var container=null;var i,j,k,children,hasLegalLinks,hasCopyright,child;for(i=0;i<containers.length;i++){children=containers[i].children;hasLegalLinks=false;hasCopyright=false;for(j=0;j<children.length;j++){if(children[j].tagName===\"HELIUX-LINKLIST\"&&hasClass(children[j],\"legallinks\")){hasLegalLinks=true;}if(children[j].tagName===\"HELIUX-TEXT\"&&hasClass(children[j],\"copyright\")){hasCopyright=true;}}if(hasLegalLinks&&hasCopyright){container=containers[i];break;}}if(!container){return false;}container.style.setProperty(\"display\",\"block\",\"important\");container.style.setProperty(\"height\",\"auto\",\"important\");container.style.setProperty(\"min-height\",\"0\",\"important\");container.style.setProperty(\"max-height\",\"none\",\"important\");for(k=0;k<container.children.length;k++){child=container.children[k];child.style.setProperty(\"display\",\"block\",\"important\");child.style.setProperty(\"position\",\"relative\",\"important\");child.style.setProperty(\"height\",\"auto\",\"important\");child.style.setProperty(\"max-height\",\"none\",\"important\");child.style.setProperty(\"width\",\"100%\",\"important\");child.style.setProperty(\"grid-row\",\"auto\",\"important\");child.style.setProperty(\"grid-column\",\"auto\",\"important\");}return true;}function repairMainPage(){var all=document.getElementsByTagName(\"*\");var candidates=[];var i,j,k,el,tag,cs,r,descendants,child,cr,ccs,lowestBottom,neededHeight,item;for(i=0;i<all.length;i++){el=all[i];tag=el.tagName.toLowerCase();if(tag.indexOf(\"heliux-\")!==0){continue;}if(isInsideFooter(el)||isExcludedComponent(el)){continue;}cs=getComputedStyle(el);r=el.getBoundingClientRect();if(cs.display===\"none\"||cs.visibility===\"hidden\"||cs.position===\"absolute\"||cs.position===\"fixed\"||cs.position===\"sticky\"){continue;}descendants=el.getElementsByTagName(\"*\");lowestBottom=r.bottom;for(j=0;j<descendants.length;j++){child=descendants[j];if(isInsideFooter(child)){continue;}cr=child.getBoundingClientRect();ccs=getComputedStyle(child);if(ccs.display!==\"none\"&&ccs.visibility!==\"hidden\"&&ccs.position!==\"fixed\"&&ccs.position!==\"sticky\"&&cr.width>0&&cr.height>0&&cr.bottom>lowestBottom){lowestBottom=cr.bottom;}}neededHeight=Math.ceil(lowestBottom-r.top);if(neededHeight>20&&r.height+4<neededHeight){candidates.push({element:el,height:neededHeight});}}for(k=0;k<candidates.length;k++){item=candidates[k];item.element.style.setProperty(\"min-height\",item.height+\"px\",\"important\");item.element.style.setProperty(\"box-sizing\",\"border-box\",\"important\");}}function runRepair(){if(window.__pmLoctiteRepairRunning){return;}window.__pmLoctiteRepairRunning=true;window.__pmLoctiteCombinedFix=\"running\";var passes=0;function pass(){passes++;repairFooter();repairMainPage();repairFooter();document.documentElement.offsetHeight;if(passes<5){setTimeout(pass,400);}else{window.__pmLoctiteRepairRunning=false;window.__pmLoctiteCombinedFix=\"installed\";}}pass();}function start(){setTimeout(runRepair,0);}if(document.readyState===\"loading\"){document.addEventListener(\"DOMContentLoaded\",start,false);}else{start();}window.addEventListener(\"load\",function(){setTimeout(runRepair,500);},false);}());"]]]]
Loctite’s JavaScript calls Element.prototype.checkVisibility(), which is missing in UXP, and many of the site’s custom heliux-* elements were then left with zero or near-zero height even though their contents were still visible. That caused later sections to be laid out on top of earlier ones.
The Modify HTTP Response workaround does two things: it adds a small checkVisibility() compatibility shim, then measures the visible contents of the collapsed heliux-* containers and gives them enough minimum height to participate in normal page flow. The footer needed a separate fix because one of its CSS Grid rows was collapsing to zero height, so the workaround switches that footer container to ordinary block flow.
This is only a site-specific workaround, but it makes the homepage usable in Pale Moon and Basilisk.
