Conditional reveals result in a flash of unstyled content as the page loads

alphagov / govuk-frontend

GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.

https://frontend.design-system.service.gov.uk/

MIT License

1.16k stars 320 forks source link

Conditional reveals result in a flash of unstyled content as the page loads #787

Closed charge-valtech closed 6 years ago

charge-valtech commented 6 years ago

fouc-conditional

As the page loads, the hidden HTML shows briefly before being hidden. This is especially noticeable on slow connections.

Ideally the hidden area should be hidden by default, and show only once triggered, or if no JS.

NickColley commented 6 years ago

I believe in the development of this feature we managed to avoid depending on the global 'js-enabled' class. This was because we were testing on a page with only the conditional reveal and on a fast connection.

In other components we've had to accept this dependency on a global 'js-enable' class so I think maybe all our components should just follow suit and avoid any issues like this.

dankmitchell commented 5 years ago

@nickcolley now that you have fixed this for tabs should we re-open this issue?

NickColley commented 5 years ago

Hey @dankmitchell !

We have added two changes to GOV.UK Frontend to fix conditional reveals and then tabs for this similar issue.

The other issue for tabs is here: https://github.com/alphagov/govuk-frontend/issues/927

So I think both of these are resolved now, is that correct?

dankmitchell commented 5 years ago

Ah yes, sorry @nickcolley. I was missing the govuk-radios__conditional--hidden class