Created attachment 400153 [details] 1st load Hello, I've the following webpage: https://node-projects.github.io/web-component-designer-demo/index.html If you load the page once, you only see parts of it. If you then load the second time the page is displayed. I think it has to do with "ConstructableStylesheetsPolyfill", but the DOM looks the same also after the first load, so I think it should work. Also when you look in the screenshots, DOM looks the same after 1st and 2nd load. Also the CSS. If you clear the cache, you get same result again.
Created attachment 400154 [details] 2nd load
I see no reason when I highlight the span in the DOM (as seen in the 2 screenshots), why the elment after the first load is not visible.
Often, symptoms like these mean that there is a timing dependency in the webpage, e.g. a function from an external script being used before it's loaded. Loading from cache changes timing.
I know this, I also want to find out wich script it is. But my problem is, the DOM is the same and exists, so I don‘t see a reason why the Browser shoudn‘t display it. It dors work in FF and Chrome without Problems.
The app has its content in a shadow DOM tree, which is why regular DOM looks the same. You can use Web Inspector to inspect parts of a successfully loaded app to see how it's displayed. There are almost certainly timing issues here. I tried loading the page with breaking on all exceptions enabled in Web Inspector, and got a result that was different from the screenshots. I'm keeping this open because the same page works fine in other browsers, but realistically, it's unlikely that WebKit developers will look into this without a more isolated test.
Yes, content is in shadow DOM. But the DOM and Shadow DOm looks the same when it's workin and when not. Look at my both screenshots, I highlight the same element, and it's visual highlighted when you move the mouse over it. And also the style's active for it look the same, but you don't see the text. So it is a timing issue, but the Visual should represent the DOM, so it should look the same.
The shadow DOM isn't the same for me. The elements are there, but sizes are different. E.g. > <div class="panel-titlebar disable-selection" style="width: 794px;"><div class="panel-titlebar-text">TreeExtended</div><div class="panel-titlebar-button-close" style="display: block;"></div></div> < <div class="panel-titlebar disable-selection" style="width: 316px;"><div class="panel-titlebar-text dockspan-panel-titlebar-text-active">TreeExtended</div><div class="panel-titlebar-button-close" style="display: block;"></div></div> This does not directly explain why everything is blank, but may be pointing at the stage where something went wrong.
Yes, you're right. But for example, look at "node-projects-app-shell" shadow dom. delete <div class="app-body"> once in a tab wich was correctly loaded, once in a broken one. Now you have the same HTML and Styles, but no rendered text. I know it's a timing issue, and I will search for that (but would be hard, maybe). But why could it haben that the browser does not render? That is the Issue. If I get the answer to this, I think the search for the error will be much easier.
I am able to reproduce this bug in Safari Technology Preview 153 on macOS 12.5.1 using attached test case from Comment 0 and it does not load "graph" area on first load (can be tried using Private Window) and then on refresh, it loads the graph area fine. Firefox Nightly 106 does not load "Graph / Designer" area at all while Chrome Canary 107 load it instantly fully unlike Safari. Just wanted to share updated testing results. Thanks!
I am still able to reproduce this in Safari 16 but it seems that fixes are page loading (document.open etc.) might have improved or fixed this and now Safari Technology Preview 156 loads this on first try and I tested it via Private Window to avoid any cache concerns. So in short - Safari Technology Preview 156 does not seems to have this issue. I am marking this as "RESOLVED CONFIGURATION CHANGED". Please reopen, if it is reproducible by anyone else.