CSS Breaking Forms in Opera?

Update: This bug appears to have been fixed in Opera 9.

A number of Mint’s Opera users have reported being unable to login to haveamint.com or successfully send an email using the site’s contact form. Both forms work as intended in all other modern browsers. Opera is usually included in that collection so what’s going on?

Identifying the Problem

I tried logging in with Opera. No luck—but there didn’t appear to be anything out of the ordinary happening. No submission errors. No JavaScript errors. But the submitted values were showing up in the query string of the form’s action url as if I was using the GET method. That’s not right. The login and contact forms both use the POST method to transmit their values. I double-checked the contact form and found the same symptoms.

I downloaded the HTML source of those pages with Opera to confirm that my server was sending the expected HTML. It was. (On OS X Opera’s view source command opens the current page as RichText in TextEdit—not exactly the “source” I was looking for.)

Time to Build a Reduction

I duplicated the contact form and began stripping away JavaScript and CSS includes. Unstyled, the form worked. Alright, so that’s how you’re gonna be. I duplicated base.css, linked it up and deleted half of the rules. The form was unstyled but it worked. I restored the deleted rules and deleted half of that restored code. The form didn’t work any more. I repeated this process of halving my CSS until I narrowed the problem down to a single selector:

form:before
{
    background: transparent url(/images/bg-body-cap-top-right.gif) right top no-repeat;
    margin-bottom: -4px;
    height: 4px;
    display: block;
    content: url(/images/bg-body-cap-top-left.gif);
}

(This code adds rounded corners to the form without requiring a fixed width or a superfluous containing element.)

I was then able to narrow it down to a single attribute:

form:before { content: url(/images/bg-body-cap-top-left.gif); }

And also found that the form breaks when using a string for a content value:

form:before { content: 'This CSS rule breaks POST forms in Opera'; }

In English

It would appear that using the :before pseudo-selector on a form to apply a content attribute forces the form to use the default GET method in Opera.

I’ve compiled the reduction into a single page and added some PHP and JavaScript to illuminate the issue. The JavaScript reveals the DOM’s take on which method should be used to send the form values. The PHP reveals which method is actually used. In Opera, expectation and reality diverge.

This issue has been confirmed in Opera:

  • 8.5 and 8.52 on OS X
  • 8.51 and 8.53 on Win XP

Curiously, the CSS is applied correctly and the form still works as expected in Opera 6.03 on OS X.

Previous
PHP Function Index 2.0
Next
Thank You For Smoking
Author
Shaun Inman
Posted
March 25th, 2006 at 9:58 am
Categories
CSS
Design
PHP
Mint
Web
Comments
008 (Now closed)

008 Comments

001

Did they say it would be fixed for Opera 9?

Author
Comrade Ghorkov
Posted
Mar 25th, 2006 7:46 am
002

That bug only applies to Opera 8.51 and below. As one of those Opera users, I can’t believe you went through all this for our sake. I’m glad that haveamint.com now works perfectly in Opera. Thank you.

Author
Oliver Zheng
Posted
Mar 25th, 2006 8:04 am
003

I haven’t been able to download Opera 9 to test, Comrade. I just submitted the bug today.

Oliver, as mentioned in the post this bug applies to at least 8.5-8.53 (the latest version I was able to download from opera.com) but does not appear in Opera 6. As for haveamint.com working perfectly in Opera, I haven’t changed anything yet. I’ve only been able to reproduce the bug, not correct it yet.

If the site is working for you could you post your Opera version and OS?

Author
Shaun Inman
Posted
Mar 25th, 2006 8:24 am
004

Ah, I see, Opera 9 is still just a technology preview. Downloading now.

Author
Shaun Inman
Posted
Mar 25th, 2006 8:25 am
005

The bug is fixed in Opera 9.

I wish there had been some mention of 9 being available (if only as a technology preview) somewhere on Opera’s site. I had to search on Google to find the download link as Opera’s own search returned nothing useful.

Anyone know what Opera’s up-to-date to installed user ratio is? This is a pretty crappy bug, Style sheets should not have any impact on form behavior.

Author
Shaun Inman
Posted
Mar 25th, 2006 8:36 am
006

I duplicated base.css, linked it up and deleted half of the rules.

You know, that’s the first thing I do when I hit a browser bug I can’t pin down - start cutting the styles in half. Doesn’t matter which half, just start narrowing down the potential culprits by halves until I’ve got it down to one or two lines.

Glad I’m a web designer and not a surgeon. “Does it hurt now? how about now?”

Author
Wilson Miner
Posted
Mar 25th, 2006 11:24 am
007

Good question on the installed base… I’d wager ~1% (I guess it depends on the site). At least in the more progressive browsers, such as Opera, the users are quicker to adopt new versions since they’re more dedicated to their browser of choice than the “average IE user.”

Author
Dave
Posted
Mar 27th, 2006 7:50 am
008

I’ve used the technology preview for a few days but had to revert to version 8.51 because Gmail didn’t work correctly - quite annoying. As a result, I have to fire up Firefox to login into Mint.

Author
Andras
Posted
Mar 27th, 2006 10:51 pm