This patch adds some nonsense I had to implement for a client:

Depending on the amount of CSS/JS loaded, it can take some time until Compact Forms' behavior is applied to the DOM. In this small time-frame, the browser renders form labels displaced, i.e. where they would appear without JavaScript being enabled.

The quick fix was to screw users without JavaScript and just hide the labels via CSS upfront. Users having JavaScript disabled won't see any form labels.

I'm not sure how to solve this properly, so feedback + ideas are welcome.

CommentFileSizeAuthor
compact_forms.hide-flicker.patch1.51 KBsun

Comments

sun’s picture

sun
Primary language German
Location Karlsruhe
commented
Status: Needs work » Needs review
mstrelan’s picture

mstrelan commented

I did something similar to this on a site where the client wanted everything to load in the background and then fade in. It was very heavy with javascript and images so you can imagine the same sort of flickering effect but on a larger scale. My approach is really ugly but was the only way I could get it to work.

  1. Set it all to display normally in CSS with JS disabled.
  2. In the initial <head> tag add some really awful Javascript
    <script>
document.write('<style>#myElement { visibility: hidden; }</style>');
</script>

    You could probably use display: none but some of my other Javascript depending on elements having widths and heights rendered

  3. Then on $(document).ready() you can use Javascript to display the labels. 
    $(document).ready(function() {
  $('#myElement').css('visibility', 'visible');
});

Mine was even more complicated because it had to fade in, and the jquery animate function only animates visible elements, so in the ready function I had to set the opacity to 0, visibility to visible and then fade it in to opacity 1.