Strange issue with captcha field

Captcha caseWell, it’s more an observation than a real problem.

For my current CakePHP project I had to set a captcha field to a user registration form. I decided to be “creative” and I set the captcha image as background of the input field. In fact the graphical representation wasn’t bad at all. Unfortunately when it’s used, the captcha word shows wrong image and of course the result was wrong. To be correct the first attempt was always ok, but the second one (let’s say if the user decided to register again) the captcha was always wrong.

I checked everything especially after the image in Javascript library case and I couldn’t find anything suspicious.

The solution came when I removed the image from the background of the field and call it with an <img> tag. This time everything went just fine. This make me think that it’s a cache problem. I didn’t dig it deeply, because for now it’s working and as you can see it’s looking better.

So, an advise from me – never put your captcha image as background of your field, or call through css. Just use good old <img> tag instead.

11 thoughts on “Strange issue with captcha field

  1. Ian

    I suspect it’s the way that browsers handle CSS. Typically, they cache CSS (background) images completely differently from standard HTML img tags.

    A good example is CSS rollovers (:hover). There is often a delay during the download of the hover (assuming the developer hasn’t used CSS sprites) and depending on the browser and it’s settings, this could be reproduced on each page of the same site.

    On the other hand, once a CSS background has been cached, the browser tends to hold onto it for dear life – again, dependent on both the browser and it’s settings. IE with default settings is notorious for this.

    Without thinking about it too much, I suspect there is a similar issue at play here.



  2. Nik Chankov Post author

    @Nikola – Sorry, the captcha in that blog is different from what I am using in my projects. This plugin is not mine and I can’t guarantee for it 😉

    @Ian – I totally agree with you – somehow caching. 🙂

  3. Nik Chankov Post author

    P.S. @Niokla, your comment about captcha here is not true, I just inserted a comment with all capital leters captcha. Probably you insert some extra char or something similar.

  4. deizel

    When setting an image using CSS, which is to change across page loads, I tend to do the following these days:

    1. Make sure that the CSS style is inline.

    Reason: Browsers like to cache external stylesheets, and will not always fetch the latest version of a stylesheet (even when pressing Ctrl+F5). IE6 is the main culprit but I have experienced this in other recent browsers.

    Logic: If the style is inline, you can be sure that since browser has actually downloaded the HTML for the page the user is viewing, it also got the correct CSS style when doing so.

    2. Make image URLs unique (by using a URL parameter).

    Reason: Same as above really. You can’t always rely on a browser accurately determining if an image has been updated and downloading it. This could be seen as old-fashioned, but since all browsers don’t necessarilly follow standards (*cough* IE) when it comes to Cache-Control headers, you can sleep well at night knowing older browsers won’t have problems with your captcha images.

    Logic: By appending a unique URL parameter (ie. ?ad76b5cd56e), browsers will be forced to redownload the image as if it was a completely different resource. Since the URL has a parameter, the browser cannot assume the image is the same as before (ie. image.jpg?animal=dog and image.jpg?animal=cat could be different even if the filesizes/modified dates were the same).

  5. Nik Chankov Post author

    Good points deizel,

    in fact the background image was in the style attribute of the input element. So probably if I did second advise it should work 🙂 I believe it should indeed.

    Thanks again. Hopefully this could help someone.

Leave a Reply

Your email address will not be published. Required fields are marked *