Page is being rendered without complete css
Reported by
talta...@gmail.com,
Sep 27 2017
|
||||||||||||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36 Example URL: https://www.sapfioritrial.com/sites?helpset=trial&sap-client=001 Steps to reproduce the problem: 1. In this site (and other similar SAP FLP sites) css is being fetched using link tag in the html head section. 2. Then other scripts are loaded, and dom elements are created. 3. At first few seconds some parts of the page (header and texts) that have css classes (that exists in the library.css loaded at first) are rendered without the css... its like the page is rendered without complete css parsing. If i replace (using fiddler) the loading of css from link to @import, it seems ok. What is the expected behavior? elements should be rendered with full css parsing. What went wrong? Page is rendered without full css parsing of loaded css classed. Does it occur on multiple sites: N/A Is it a problem with a plugin? No Did this work before? N/A Does this work in other browsers? Yes Chrome version: 61.0.3163.100 Channel: stable OS Version: 10.0 Flash Version:
,
Sep 28 2017
Hi Krajshree, See attached cast. I put a js breakpoint to show the issue. and you can see when I inspect an element that has css class (that was already loaded at beginning) on the right side of dev inspector you can see that this class isnt linked to no where, and not found. Thanks, Tal
,
Sep 28 2017
Thank you for providing more feedback. Adding requester "krajshree@chromium.org" to the cc list and removing "Needs-Feedback" label. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Sep 28 2017
Bisect info: 470489 (good) - 470495 (bad) https://chromium.googlesource.com/chromium/src/+log/5730d628..27217b88?pretty=fuller Suspecting r470490 "Add Field Trial Testing Configuration for MojoLoading" Landed in 60.0.3096.0 Confirmed by disabling chrome://flags/#enable-mojo-loading and observing the behavior becoming the same as in "good" builds. It should be noted that even in "good" builds there's a bit of unstyled content shown (FOUC), see the attached pictures. Firefox correctly shows only the styled page, no unstyled elements appear while loading the page.
,
Sep 28 2017
krajshree@chromium.org, the bug is about the first seconds during loading of the page. If you compare to Firefox, you will easily see the difference.
,
Oct 2 2017
,
Oct 2 2017
,
Oct 3 2017
> If i replace (using fiddler) the loading of css from link to @import, it seems ok. Can you explain this a bit?
,
Oct 3 2017
,
Oct 3 2017
yhirano,
If instead of <link href...> to load the css , i use the @import, i dont see the problem:
<style>
@import url("link_to_css.css");
</style>
,
Oct 3 2017
I guess "link_to_css.css" is not the exact URL, right? Can you provide the exact URL(s)?
,
Oct 18 2017
@yhirano, It doesnt really matter... Whatever URL which was on the link href, i replaced with @import url so in case of demo site above, its: https://www.sapfioritrial.com/sap/ui5/1/stable/resources/sap/fiori/themes/sap_bluecrystal/library.css?version=1.28.47&sap-ui-dist-version=1.28.47
,
Oct 24 2017
With mojo-loading, .../friori/.../library.css?version=1.28.47... is loaded twice. Without mojo-loading, it's loaded once.
,
Oct 24 2017
,
Oct 25 2017
Probably we should look into library.css?version=1.28.43 instead of 1.28.47.
,
Nov 1 2017
I think I understand (at least part of) the problem.
The style applied to the dialog is contained in library.css?version=1.28.43. It takes long time to load and the renderer main thread is very busy during the loading (largely due to sync XHR requests). When the CSS file is loaded, with mojo-loading, there is a slight delay of completion event. The script which injects the dialog element ("#eulaDialogContent") starts running (via setTimeout) just before the completion event, and stays running for seconds. That is why we see the dialog without the style applied for seconds.
I suspect that the site relies on subtle timing which is not specified. taltal78@, I'm not sure if you can access the site's code, but if you can, can you insert the dialog element after receiving the onload event of the link element?
,
Nov 1 2017
For this specific site I have no access.. but I assume you can try it out with fiddler for instance ?
,
Nov 8 2017
According to devtools library.css?version=1.28.43 is requested by core-min-0.js. It seems LoadingWithMojo changes loading timing slightly and that broke site author's assumption. I'm not sure whether the assumption is valid is not - in general a UA can change loading timings as long as conforming to the spec. The site is too large to investigate further. I will leave this issue as assigned for a while, but will it close as WONTFIX unless a smaller reproduction is provided.
,
Nov 15 2017
,
Nov 17 2017
Doesn't occur on any other browser...
,
Nov 28 2017
Hi, This occurs in chrome only. You can see here a lightweight example - http://jsbin.com/wonudujevo/4/edit?html,output The FOUC is not always visible – only some refreshes show the FOUC (best when debugger is open). Please check this... its a bug. thanks, Tal
,
Nov 28 2017
Thank you for the test case, I will take another look.
,
Nov 28 2017
I can see the "Hello" button style unapplied with Chrome and Firefox.
,
Nov 28 2017
I attach 2 screenshots: withStyle.png ,withoutStyle.png. Also i attach video of loading. You can see in second 2 its without style, and in second 3 it gets the style.
,
Nov 28 2017
Yeah, and I see the same behavior on Firefox either.
,
Nov 29 2017
In anycase It's a bug. I tested 2 machines and couldn't see it in IE or Firefox.
,
Nov 29 2017
Using http://jsbin.com/wonudujevo/4/edit?html,output from #c21, Bisect info: 370644 (good) - 370649 (bad) https://chromium.googlesource.com/chromium/src/+log/9b798d93..e78a0765?pretty=fuller Suspecting r370646 = bec656722788dbc2f74e15c29d52dfef47089f3d = https://crrev.com/1603873004 by horo@chromium.org "Dynamically inserted StyleSheet shouldn't block loading." Landed in 50.0.2628.0 StR: 1. remove the cache i.e. run bisect-builds.py without -p option 2. open http://jsbin.com/wonudujevo/4/edit?html,output 3. repeat 1-2 up to 10 times (retry in the bisect script) Expected: the button is always styled Observed: sometimes/often the button is unstyled P.S. Re-checked the results 4 times.
,
Nov 30 2017
taltal78@, the two CSS URLs in the jsbin are different. One is .../sap_belize/... and another is .../sap_belize_plus/... . Can you tell me why?
,
Dec 6 2017
,
Jan 5 2018
|
||||||||||||||||||
►
Sign in to add a comment |
||||||||||||||||||
Comment 1 by krajshree@chromium.org
, Sep 28 2017Components: Platform>DevTools
Labels: Needs-Feedback Needs-Triage-M61
8.7 MB
8.7 MB View Download