Infinite page-growth when using loading WASM

support
1

Hi all,

I am trying to run a WASM ui in the browser using egui (GitHub - emilk/egui: egui: an easy-to-use immediate mode GUI in Rust that runs on both web and native).
I have successfully managed to load the WASM by itself without any issues.
However, when loading it with hugo, it somehow creates this infinite expanding of the page (as can be seen in the video).
Any thoughts on what might cause this, and how I might resolve it?

This is the snippet I am using to load the wasm:

{{ $filename := .Get 0 }}
{{ $javascript := .Page.Resources.GetMatch (printf "%s.js" $filename) }}
{{ $wasm := .Page.Resources.GetMatch (printf "%s_bg.wasm" $filename) }}

{{ $id := .Get 1 }}

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<script type="module">import init from '{{ $javascript.RelPermalink }}';init('{{ $wasm.RelPermalink }}');</script>

<link rel="preload" href="{{ $wasm.RelPermalink }}" as="fetch" type="application/wasm" crossorigin="">
<link rel="modulepreload" href="{{ $javascript.RelPermalink }}">

<canvas id="{{ $id }}"></canvas>

The issue in motion (note the scroll-bar on the right getting smaller and smaller):
ezgif.com-video-to-gif-converted

2

Looking at it more closely, it seems like a “position: absolute;” css line is added when I click the element even though I’m manually setting it to be relative.
Is there some way to prevent it from doing that?

3

You mean Hugo add this CSS line? If it’s in the DOM you perhaps need a CSS reset. Please share your source code if you want some help.

4

Hi, I haven’t quite narrowed down where this is being added.
What source code would you be referring to? I did attach the complete shortcode I am using to display the window in the original post.
That said, I did update it so here is the revised version:


{{ $filename := .Get 0 }}
{{ $javascript := .Page.Resources.GetMatch (printf "wasm_window/%s.js" $filename) }}
{{ $wasm := .Page.Resources.GetMatch (printf "wasm_window/%s_bg.wasm" $filename) }}

{{ $id := .Get 1 }}

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <script type="module">import init from '{{ $javascript.RelPermalink }}';init('{{ $wasm.RelPermalink }}');</script>
    </head>
    
    <body style="cursor: default;">
        <link rel="preload" href="{{ $wasm.RelPermalink }}" as="fetch" type="application/wasm" crossorigin="">
        <link rel="modulepreload" href="{{ $javascript.RelPermalink }}">
        
        <canvas class="wasm_canvas" id="{{ $id }}" style="position:relative !important;"></canvas>
    </body>
</html>
5

Your issue is about a CSS thing, so if you share your all repo (including your CSS files), we can perhaps help you to understand why this CSS line has bee added.

6

Hi,

This is a theme made from scratch, so there is no css affecting the canvas tag directly
I also removed the colouring css, and the result is unfortunately still the same.
There are some other css elements which I’ve pasted here:
The lightbox stuff at the bottom is an extension I found at: Lightbox | Hugo Codex

CSS 
.image_gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.image_gallery li {
    flex: 1 0 25%; /* This will create a 3-column grid */
    margin: 5px;
    list-style: none;
}

.image_gallery img {        
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100%;

    position: relative;
    transition: all .5s;
    filter: brightness(70%);
}

.image_gallery img:hover {
    transform: scale(1.05);
    filter: brightness(100%);
}

a {
    color: var(--link-color);
    text-decoration: none;
    -webkit-transition: all .24s ease-out;
    -o-transition: all .24s ease-out;
    transition: all .24s ease-out
}

a:hover {
    color: var(--link-color-hover)
}

a:active {
    color: var(--link-color-hover)
}

a:focus {
    outline: 0
}

body {
    background: var(--page-bg);
    color: var(--text-color);
    font-family: var(--body-font);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height);
    -ms-scroll-chaining: none;
    overscroll-behavior: none
}

/* --- Header --- */
.top_header {
    height: var(--navbar-height);
}

.navbar_menu {
    display: flex;
}

.navbar_menu li {
    list-style: none;
    display: block;
    padding: 8px;

    font-family: var(--menu-font);
    font-weight: 500;
    text-transform: uppercase;
}

.navbar_menu li a:active {
    color: none;
}

.navbar_logo {
    margin-right: auto;
}
.project_banners {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.project_banners li {
    list-style: none;
    margin-bottom: 10px;
}

.project_banners img {        
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100%;

    position: relative;
    transition: all .5s;
    filter: brightness(70%);
}

.project_banners img:hover {
    transform: scale(1.05);
    filter: brightness(100%);
}

#lightbox {width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.85); z-index: 9999999; line-height: 0; cursor: pointer; display: none;}
#lightbox .img {
    position: relative; 
    top: 50%;
    left: 50%;
    -ms-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    max-width: 100%;
    max-height: 100%;
}
#lightbox .img img {opacity: 0; pointer-events: none; width: auto;}
@media screen and (min-width: 1200px) {
    #lightbox .img {
        max-width: 1200px;
    }
}
@media screen and (min-height: 1200px) {
    #lightbox .img {
        max-height: 1200px;
    }
}
#lightbox span {display: block; position: fixed; bottom: 13px; height: 1.5em; line-height: 1.4em; width: 100%; text-align: center; color: white; text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;  
}

#lightbox span {display: none;}

#lightbox .videoWrapperContainer {
    position: relative; 
    top: 50%;
    left: 50%;
    -ms-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    max-width: 900px;
    max-height: 100%;
}
#lightbox .videoWrapperContainer .videoWrapper {
    height: 0;
    line-height: 0;
    margin: 0;
    padding: 0;
    position: relative;
    padding-bottom: 56.333%; /* custom */
    background: black;
} 
#lightbox .videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}   
#lightbox #prev, #lightbox #next {height: 50px; line-height: 36px; display: none; margin-top: -25px; position: fixed; top: 50%; padding: 0 15px; cursor: pointer; text-decoration: none; z-index: 99; color: white; font-size: 60px;}
#lightbox.gallery #prev, #lightbox.gallery #next {display: block;}
#lightbox #prev {left: 0;}
#lightbox #next {right: 0;}
#lightbox #close {height: 50px; width: 50px; position: fixed; cursor: pointer; text-decoration: none; z-index: 99; right: 0; top: 0;}
#lightbox #close:after, #lightbox #close:before {position: absolute; margin-top: 22px; margin-left: 14px; content: ""; height: 3px; background: white; width: 23px;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
/* Safari */
-webkit-transform: rotate(-45deg);
/* Firefox */
-moz-transform: rotate(-45deg);
/* IE */
-ms-transform: rotate(-45deg);
/* Opera */
-o-transform: rotate(-45deg);
}
#lightbox #close:after {
/* Safari */
-webkit-transform: rotate(45deg);
/* Firefox */
-moz-transform: rotate(45deg);
/* IE */
-ms-transform: rotate(45deg);
/* Opera */
-o-transform: rotate(45deg);
}
#lightbox, #lightbox * {
    -webkit-user-select: none;  
    -moz-user-select: none;    
    -ms-user-select: none;      
    user-select: none;
}
7

The CSS you posted is incomplete (it refers to variables that are never defined). But this whole exercise is futile since we’re all lacking context, and you don’t do the obvious: Use your browser’s dev tools to figure out what happens.

8

Apologies, I removed the variables for brevity, here’s the complete thing:

CSS 
/* ----------------------------------------------------------------
- This styling takes a lot from the Publii theme "Simple" found at:
- https://marketplace.getpublii.com/themes/simple/
   ---------------------------------------------------------------- */

@font-face {
    font-family: 'Public Sans';
    src: url('../fonts/publicsans/publicsans.woff2') format('woff2 supports variations'), url('../fonts/publicsans/publicsans.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-display: swap;
    font-style: normal
}

@font-face {
    font-family: Exo;
    src: url('../fonts/exo/exo.woff2') format('woff2 supports variations'), url('../fonts/exo/exo.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-display: swap;
    font-style: normal
}

:root {
    --navbar-height: 4.4rem;
    --body-font: 'Public Sans', sans-serif;
    --heading-font: 'Exo', sans-serif;
    --logo-font: var(--heading-font);
    --menu-font: var(--heading-font);
    --font-weight-normal: 400;
    --font-weight-bold: 700;
    --headings-weight: 750;
    --headings-transform: none;
    --line-height: 1.7;
    --hero-height: 80vh;
    --hero-bg: #17181E;
    --hero-heading-color: #FFFFFF;
    --hero-text-color: rgba(255, 255, 255, 0.75);
    --hero-link-color: #FFFFFF;
    --hero-link-color-hover: rgba(255, 255, 255, 0.75);
    --hero-border-color: rgba(255, 255, 255, 0.3);
    --white: #FFFFFF;
    --white-rgb: 255, 255, 255;
    --black: #FFFFFF;
    --dark: #CECBCB;
    --gray: #9D9D9D;
    --light: #373737;
    --lighter: #1e1e1e;
    --page-bg: #181818;
    --section-bg: #1e1e1e;
    --color: #FFC074;
    --color-rgb: 255, 192, 116;
    --text-color: #BFBFBF;
    --headings-color: #EEEDED;
    --link-color: #EEEDED;
    --link-color-hover: #FFC074;
    --nav-link-color: rgba(255, 255, 255, 1);
    --nav-link-color-hover: rgba(255, 255, 255, .7);
    --logo-color: #FFFFFF;
    --highlight-color: #F6DC90;
    --highlight-color-rgb: 24, 24, 24;
    --info-color: #5B9ED5;
    --info-color-rgb: 24, 24, 24;
    --success-color: #54A468;
    --success-color-rgb: 24, 24, 24;
    --warning-color: #FB6762;
    --warning-color-rgb: 24, 24, 24
}

/* --- Misc Stuff --- */
a {
    color: var(--link-color);
    text-decoration: none;
    -webkit-transition: all .24s ease-out;
    -o-transition: all .24s ease-out;
    transition: all .24s ease-out
}

a:hover {
    color: var(--link-color-hover)
}

a:active {
    color: var(--link-color-hover)
}

a:focus {
    outline: 0
}

body {
    background: var(--page-bg);
    color: var(--text-color);
    font-family: var(--body-font);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height);
    -ms-scroll-chaining: none;
    overscroll-behavior: none
}

/* --- Header --- */
.top_header {
    height: var(--navbar-height);
}

.navbar_menu {
    display: flex;
}

.navbar_menu li {
    list-style: none;
    display: block;
    padding: 8px;

    font-family: var(--menu-font);
    font-weight: 500;
    text-transform: uppercase;
}

.navbar_menu li a:active {
    color: none;
}

.navbar_logo {
    margin-right: auto;
}

/* --- projects banner-list --- */

.project_banners {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.project_banners li {
    list-style: none;
    margin-bottom: 10px;
}

.project_banners img {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100%;

    position: relative;
    transition: all .5s;
    filter: brightness(70%);
}

.project_banners img:hover {
    transform: scale(1.05);
    filter: brightness(100%);
}

/* --- Lightbox Gallery --- */
/* Taken from: https://hugocodex.org/add-ons/lightbox/ */
.lightbox {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 9999999;
    line-height: 0;
    cursor: pointer;
    display: none;
}

.lightbox .img {
    position: relative;
    top: 50%;
    left: 50%;
    -ms-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
}

.lightbox .img img {
    opacity: 0;
    pointer-events: none;
    width: auto;
}

@media screen and (min-width: 1200px) {
    .lightbox .img {
        max-width: 1200px;
    }
}

@media screen and (min-height: 1200px) {
    .lightbox .img {
        max-height: 1200px;
    }
}

.lightbox span {
    display: block;
    position: fixed;
    bottom: 13px;
    height: 1.5em;
    line-height: 1.4em;
    width: 100%;
    text-align: center;
    color: white;
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
}

.lightbox span {
    display: none;
}

.lightbox .videoWrapperContainer {
    position: relative;
    top: 50%;
    left: 50%;
    -ms-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    max-width: 900px;
    max-height: 100%;
}

.lightbox .videoWrapperContainer .videoWrapper {
    height: 0;
    line-height: 0;
    margin: 0;
    padding: 0;
    position: relative;
    padding-bottom: 56.333%;
    /* custom */
    background: black;
}

.lightbox .videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.lightbox #prev,
.lightbox #next {
    height: 50px;
    line-height: 36px;
    display: none;
    margin-top: -25px;
    position: fixed;
    top: 50%;
    padding: 0 15px;
    cursor: pointer;
    text-decoration: none;
    z-index: 99;
    color: white;
    font-size: 60px;
}

.lightbox.gallery #prev,
.lightbox.gallery #next {
    display: block;
}

.lightbox #prev {
    left: 0;
}

.lightbox #next {
    right: 0;
}

.lightbox #close {
    height: 50px;
    width: 50px;
    position: fixed;
    cursor: pointer;
    text-decoration: none;
    z-index: 99;
    right: 0;
    top: 0;
}

.lightbox #close:after,
.lightbox #close:before {
    position: absolute;
    margin-top: 22px;
    margin-left: 14px;
    content: "";
    height: 3px;
    background: white;
    width: 23px;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    /* Safari */
    -webkit-transform: rotate(-45deg);
    /* Firefox */
    -moz-transform: rotate(-45deg);
    /* IE */
    -ms-transform: rotate(-45deg);
    /* Opera */
    -o-transform: rotate(-45deg);
}

.lightbox #close:after {
    /* Safari */
    -webkit-transform: rotate(45deg);
    /* Firefox */
    -moz-transform: rotate(45deg);
    /* IE */
    -ms-transform: rotate(45deg);
    /* Opera */
    -o-transform: rotate(45deg);
}

.lightbox,
.lightbox * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* --- Image Gallery --- */
.image_gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.image_gallery li {
    flex: 1 0 25%;
    /* This will create a 3-column grid */
    margin: 5px;
    list-style: none;
}

.image_gallery img {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100%;

    position: relative;
    transition: all .5s;
    filter: brightness(70%);
}

.image_gallery img:hover {
    transform: scale(1.05);
    filter: brightness(100%);
}

\

I have checked the dev-tools, however, the only thing I see is that when I click the element,
a position: absolute; magically appears and I don’t know why.
Below is a gif of it happening (note the element.style on the middle-right)
chrome_XXERtL4f0Q

9

Then there’s an event handler associated with the element. Set a break point on it. And since nothing here is about Hugo, you might have more luck asking in places that specialize on CSS, HTML and JavaScript.

10

I see, I will continue tinkering with the devtools in that case to see where the issue lies.
My assumption was that since it doesn’t happen when I run the WASM by itself, nothing breaks, but with Hugo it breaks, that hugo was the cause. But like you said this is likely some HTML/css issue.
Thank you for your time!