?
avatar andrepereiradasilva
andrepereiradasilva
19 May 2016

Steps to reproduce the issue

Global configurarion Yes/No, showon and chosen styles are rendering to slow, originating Flash of Unstyled Content (FOUC).

Expected result

Render normally.

Actual result

Some 500ms where the Yes/No, showon and chosen are not properly renderend originating Flash of Unstyled Content (FOUC).

System information (as much as possible)

Latest staging.

Additional comments

Something to do with the permissions tab part.

All work fine (just an expected small delay due to showon hiding fields) if for testing proposes the permissions actions are removed (some or all) in https://github.com/joomla/joomla-cms/blob/staging/administrator/components/com_config/model/form/application.xml#L1007-L1046.

avatar andrepereiradasilva andrepereiradasilva - open - 19 May 2016
avatar andrepereiradasilva andrepereiradasilva - change - 19 May 2016
The description was changed
avatar Bakual
Bakual - comment - 19 May 2016

The permission tab doesn't use chosen for exact that reason.
If chosen is loaded in your case for that tab, then something else loads it.

avatar andrepereiradasilva
andrepereiradasilva - comment - 19 May 2016

"My case" in Joomla staging clean with sample data.

avatar andrepereiradasilva
andrepereiradasilva - comment - 19 May 2016

Also chosen is not loaded for the permission tab as you can see.
image

avatar Bakual
Bakual - comment - 19 May 2016

Yeah that's what I mean, chosen isn't loaded in the permission tab. Those are regular select boxes.
I understood your issue description that you blame chosen for it, but it shouldn't be the case since it isn't active on that tab. Also there is no showon on this tab.

There is however some JavaScript doing some ajax stuff on this tab. Thus it may be related to that?

avatar andrepereiradasilva
andrepereiradasilva - comment - 19 May 2016

Yeah that's what I mean, chosen isn't loaded in the permission tab. Those are regular select boxes.
I understood your issue description that you blame chosen for it, but it shouldn't be the case since it isn't active on that tab. Also there is no showon on this tab.

i didn't blame chosen. i blamed javascript processing ????

All javascript inside all global configuration tabs are processed on page load (or document ready).

There is however some JavaScript doing some ajax stuff on this tab. Thus it may be related to that?

Very probably. I will disable the permission js to see what happens.

avatar andrepereiradasilva
andrepereiradasilva - comment - 19 May 2016

just tested. no, not related to permissions.js

avatar brianteeman brianteeman - change - 20 May 2016
Category ACL JavaScript
avatar ggppdk
ggppdk - comment - 21 May 2016

@andrepereiradasilva

I can reproduce this (FOUC) delay (Flash of Unstyled Content)
about 0.3 - 0.6 seconds depening on the browser
on a new installation of staging (on localhost)

  • when "Debug System" parameter is enabled

and it is because, some styling is JS based (e.g. bootstraps styling on radios and ...)

  • thus if the bootstrap styling (and its event attaching) runs after some other heavy JS, e.g. the JS of the DEBUG information

then you get the above effect,

Also other things that contribute a little more to the effect:

  • attachForm of html5fallback.js adds a little more to it,
  • also in real installations with more HTML and larger forms, the effect is made even more noticeable

i think this is not the first time that this is discussed, there was an issue about sidebar jumping when "System debug" parameter is ON

how much time the browser waits to make a non-forced refresh depends on the browser, so you can also experience a "freeze" effect instead of the FOUC delay

If you don't have Joomla System debug ON then the effect could be by some browser plugin ?
like skype-click-to-call that examine and modify the HTML ... then also test with your browsers in safe mode

avatar andrepereiradasilva
andrepereiradasilva - comment - 22 May 2016

i have no debug plugin ativated. I have no browser plugin. clean joomla staging with sample data.

avatar ggppdk
ggppdk - comment - 22 May 2016

I don't know then,
i was only guessing above,

maybe chrome console is better for profiling this, than console of other browsers ? (i need to check if edge is good / easy at profiling)

But can you also check, if you have configured your webserver to always send no-cache headers to the browser ?
and thus browser is never caching CSS / JS files ?

If you open browser tools and go to the network TAB,
then most browsers would have a column to report what happens with file retrieval

that if CSS / JS / HTML file was

  • downloaded --- or retrieved from cache --- or if server was ask if it was modified
  • if web-server was asked ... answer would for re-downloading (HTTP 200 OK), or if it was not re-downloaded, response would be "HTTP 304 not modified"
avatar Fedik
Fedik - comment - 22 May 2016

@andrepereiradasilva why do you think it just permission tab? it just a tab ????
other parts of the form just hidden, but it does not means that they not affect whole page rendering.

as you already wrote, there 2 recourse eaters showon (1 place) and chosen (2 place),
showon need to optimise, and chosen just drop (old topic) ????

avatar andrepereiradasilva
andrepereiradasilva - comment - 22 May 2016

@andrepereiradasilva why do you think it just permission tab? it just a tab ????

because when remove some (or all) permission select fields all work without any FOUC

avatar Fedik
Fedik - comment - 23 May 2016

ah, right ????

well, but still, it is problem in amount of the fields on the page, and permission field can include a looooot of them, due its logic. And because of this the showon need more time to set up.

Same can happen in any other form with huge amount of the fields, without permission field.

avatar brianteeman brianteeman - change - 23 May 2016
Labels Added: ?
avatar andrepereiradasilva
andrepereiradasilva - comment - 23 May 2016

yes, for sure it has to do with the quantity of fields in a page.

Not 100% sure the problem origin is chosen or showon ... need to test without chosen and showon js behaviours.

avatar andrepereiradasilva andrepereiradasilva - change - 5 Sep 2016
Status New Closed
Closed_Date 0000-00-00 00:00:00 2016-09-05 22:51:38
Closed_By andrepereiradasilva
avatar andrepereiradasilva andrepereiradasilva - close - 5 Sep 2016

Add a Comment

Login with GitHub to post a comment