htmlcssopera-mini

<select> reloads page when clicked on Opera Mini

Clicking on a <select> element with border:none; and cursor:pointer in Opera Mini reloads the page. Minimal example:

select {
  cursor: pointer;
  border: none;
}
<select>
  <option value="1">English</option>
  <option value="2">Mathematics</option>
  <option value="3">Social Studies</option>
  <option value="4">Business</option>
</select>

Anyone knows a better way of fixing that other than removing one of these CSS properties or changing the border to solid transparent 1px?

Solution

  • It is a cursor: pointer; feature. If you click on pointer area opera mini send page to server to run javascript event delegation.

    Event Delegation in Opera Mini

    Until recently,Event delegation didn’t work in Opera Mini. Now it’s implemented by the Server sending clickable areas to the client for anything with cursor:pointer. Delegation mostly works as expected with click events with the exception of form elements; it’s rather hard to detect whether using them should trigger an event (and thus a server round trip) or not, unless an event listener is attached directly to them. A workaround is to add a dummy event listener to required form element.