SimonDanisch / Bonito.jl

Serving JS to the browser
MIT License
209 stars 31 forks source link

Elements not displaying (possibly due to position relative / absolute) #119

Closed piever closed 2 years ago

piever commented 2 years ago

Since JSServe 1.2.4, I've noticed that some elements fail to display in the browser.

MWE (displays correctly in JSServe 1.2.3, does not display at all in JSServe 1.2.4 or 1.2.5, no errors in the console):

julia> using JSServe

julia> App() do
           content = "test"
           return DOM.div(
               JSServe.TailwindCSS,
               DOM.div(
                   DOM.div(content; class="absolute left-0 right-8");
                   class="overflow-y-scroll h-full w-full relative"
               )
           )
       end

More complex example using external library (also failing):

julia> using JSServe

julia> using JSServe: onload, Dependency

julia> agGrid = JSServe.Dependency(:agGrid, [
           "https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.noStyle.js",
           "https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css",
           "https://unpkg.com/ag-grid-community/dist/styles/ag-theme-alpine.css"
       ]);

julia> App() do session::Session, request
           table_div = DOM.div()
           onload(session, table_div, js"""
               function (div) {
                   const columnDefs = [{field: "a", headerName: "a"}, {field: "b", headerName: "b"}];
                   const rowData = [{a: 1, b: 1}, {a: 2, b: 2}, {a: 3, b: 3}];

                   // let the grid know which columns and what data to use
                   const gridOptions = {
                       columnDefs: columnDefs,
                       rowData: rowData,
                   };

                   new $(agGrid).Grid(div, gridOptions);
               }
           """)
           return table_div
       end

I think what they have in common is this general structure of putting a div with absolute position inside a div with relative position (it's very useful to make some specific layouts).

~Not sure what change is responsible for this, maybe the iframe resizing? Not sure how though, as I experienced the same issue when running using Server, where I guess there is no iframe.~

EDIT: it actually seems due to #115

piever commented 2 years ago

Turns out this is the expected behavior... Reproducing the same page with or without the DOCTYPE statement as a plain HTML file yields the same result. The browser renders the content differently whether it is in standard mode (with a DOCTYPE) or quirks mode (no DOCTYPE), and these turned out to be cases that are rendered differently.