Problem/Motivation
- In Firefox and IE with enabled hardware acceleration (and supporting Subpixel), the input fields are rendered sightly taller. This causes part or all of the spinning/searching state of the throbber in autocomplete fields to be revealed - even while the autocomplete is in idle state (see screenshot above).
- Furthermore, if the input font size is increased or if extra padding is added to inputs, styles are also broken as above shown - in all browsers.
- In some browsers, like old Chrome (#1891764: Autocomplete throbber causes excessive CPU usage on some browsers) animated GIFs cause excessive CPU usage. Having the animated searching/spinning state and the idle state of the throbber in a single animated GIF file forces us to load it in all pages that have an autocomplete field. So the CPU issue occurs even when the autocomplete is idle. What's worse is that most of the time users have no clue why their browser hogs their system only on some sites (made with Drupal) and only in certain pages (that contain autocomplete fields).
Proposed resolution
- Split throbber.gif into 2 files and hide the animated/spinning GIF file by default to resolve high CPU usage.
- Remove the fixed value and let browsers vertical align the image correctly.
Remaining tasks
N/A
User interface changes
On buggy browsers, it shows the throbber correctly:
API changes
N/A
Original report by @ogi
When Bartik is set for adding and editing content, throbber in textfield shows part of the rotating throbber. See the attached screenshot.
I fixed this by changing background-position in my Bartik subtheme by adding 4px. Additionally, I moved throbber slightly left. The second attachment shows the result.
/* Animated throbber */
html.js input.form-autocomplete {
background-image: url(../../../../../misc/throbber.gif);
background-position: 99% 6px; /* LTR */
background-repeat: no-repeat;
}
html.js input.throbbing {
background-position: 99% -14px; /* LTR */
}