Home/ Questions/Q 7401095
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T04:22:41+00:00

I’m having what at first looks like a typical margin related jerking problem with

  • 0

I’m having what at first looks like a typical margin related jerking problem with jQuery, using the jQuery UI “show()” method (animation is called “clip”). However, firstly, the box slides down too far, and then “jerks” back up again (usually when it’s margin related, the box slides down most of the way then “jerks” the rest to accommodate the margin). Also, it only happens in very specific circumstances. The page in question:

http://iamalexkempton.net/themes/windowed/noslider.html

There are a bunch of hidden DIVs using CSS. They are revealed using the navigation. The DIVs can be hidden again using the “X” icon. The bug only happens with the “profile” DIV and the “hello” DIV. In the “hello” DIV, it doesn’t jerk because jScrollPane is activated, but you can see something is going wrong because there is a huge gap at the bottom of the content that shouldn’t be there.

Weirdly, the bug ONLY happens once. Also, it ONLY happens if no other DIVs are revealed before hand. If you clicked on “tags” and then “profile”, the bug won’t happen. Only when “profile” is clicked first, it happens, and then never again.

The bug is happening in FF and Chrome, and not IE9, which leads me to think it must have something to do with CSS rendering, but the fact that it only happens under certain circumstances has me very confused.

I realise this is a very specific issue, but I’m hoping someone might be able to shed some light on it!

Please feel free to critique my coding and anything else, I’m here to learn.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Worked out what was causing the flicker. It’s the Google Fonts flickering for a second when being rendered. This means that it only happens once, because after they are loaded (in any DIV), they no longer do this flickering. Apparently this is called FOUT (Flash of Unstyled Text).

    To fix it I’m simply loading in an invisible header tag into the document (I’m using google fonts for the headers), which is enough for it to render the font and not flicker when the first DIV opens up. A bit messy but does the trick.

    $("body").append('<h1 style="visibility:hidden">M</h1>');
    • 0