Elements appear only after checking the element

Question

I just ran into the strangest problem that I have ever encountered in my humble freelance web development. I am creating a web application for an application site where applicants use their webcams to answer 3 short questions. To do this, I use a jQuery plugin called ScriptCam , which uses Flash to activate the user's webcam. I had it all good, but now I have the following problem.

I use jQuery .show() and .hide() to show and hide buttons. One button, the play button, does not appear when calling $("#replay").show(); , but it is displayed when I right-click anywhere in the browser after calling this command and click "Check item"! I was looking for what might cause this problem but couldn't find anything ... What could cause this behavior?

This is how I defined the button:

<div onclick='replay();' id='replay' class="replay">Replay</div>

This is the CSS button:

 .replay{ float: left; top: 150px; left: 60px; z-index: 100; -webkit-box-shadow: 0 12px 36px -16px rgba(0,0,0,0.5); background:url('../img/button-grey.png') no-repeat 100% 100%; background-position: center center; color: white; width: 140px; text-align: center; padding: 10px; cursor: pointer; font-family: Archive; display: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } 

Edit: this is the CSS of the parent button div:

 .box{ margin-left: 100px; height: 337px; width: 300px; float: left; text-align: center; } 

I have not used any delays anywhere, and the button really only appears right after I click on the validation element somewhere in the browser. I also cannot reproduce this problem anywhere. Has anyone realized what could cause this? Any help would be greatly appreciated, thanks in advance!

Update. It seems that only Safari on Mac has problems.

Update 2: When moving a button from this parent div directly below the body tag, it works as it should! So maybe this is the css conflict of the parent div?

Edit: you can see the problem in real time here , just click the “Volgende vraag" button, wait until the short video ends. After that, the play button should appear directly above the video.

Answer 1

I have found a solution! The problem is caused by an earlier div container that has CSS display:none . Although I modify this with jQuery .show() before the problem occurs and the content is visible, removing display:none in my CSS makes it work! Thanks for the great help and suggestions!

Answer 2

For me, I had to change the visibility of an element that I found hidden above the image in my stylesheet to fix the problem. I found it with a control item. Then, after changing it, the image rose noticeably, so I had to change the fields to return it back to its original position.