Problem/Motivation

BAD

  • 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:

GOOD

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 */
}

Comments

Version:7.0» 7.x-dev
Issue tags:+IE

tagging IE

StatusFileSize
new4.67 KB

It's not IE-only, I observe this behaviour in Firefox 4 Beta under Windows 7.

Unfortunately my changes are not enough. Attached is how Tags field is shown with my changes.

Issue tags:-IE

oh cool, forgot Im using IE9

I do some test and it seems only happen on browser with hardware acceleration enabled .

enabled hardware acceleration, inputs height will increase... FTW!! (related to font-size: 0.929em, Sub-pixel problem)

Yes, after setting gfx.direct2d.disabled to true throbber looks OK.

I see this too in latest dev from March 10. I only came across it in the 'Authored by' field in node create/edit. Any progress?

limited height or remove INPUTs padding is a way to solve this problem

Title:Throbber in textfield in Bartik theme is misalignedThrobber in textfield is misaligned when browser hardware acceleration enabled (gfx)
Component:Bartik theme» base system
Status:Active» Needs review
Issue tags:+gfx, +sub-pixel
StatusFileSize
new8.13 KB
FAILED: [[SimpleTest]]: [MySQL] Invalid patch format in throbber.patch.
[ View ]

I edited throbber.gif to have more space between hover & non-hover state. and adding JS to calc elements height and apply right background position.

It's potential risk to other themes as well.

Status:Needs review» Needs work

The last submitted patch, throbber.patch, failed testing.

@droplet: can you please attach the .gif as a file instead of a binary diff please.

StatusFileSize
new2.37 KB

@klonos,
sure

correct my comment on #7
JS is calc elements inner height (height + padding). because padding is one of the main reason cause this problem.

...thanx, this fixes things, but I don't actually know how it will do with themes other then Bartik.

Version:7.x-dev» 8.x-dev
Issue tags:+needs backport to D7

#10 would help fixing all issues regarding to the change of height of an auto complete input field. meaning you can alter the css and fix it. currently you have to replace the throbber.

Status:Needs work» Needs review
StatusFileSize
new5.9 KB
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch throbber-alignment-1069152-14.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]

Here's #10 rerolled to fix some whitespace and to apply against 8.x. Most of the changes appear to have already been committed.

Component:base system» javascript
Issue tags:+JavaScript

Oh, nice! This has been driving me nuts in the Spark/Edit queue.

I can't actually have the front-end chops to give this a final RTBC but very excited to see it being worked on! :D

Futzing with some metadata.

So the problem here is the classic one where a sprite will have adjacent elements bleed into view if the size of the container exceeds the sprite spacing in the image. Although it looks like the proposed solution would work (extra space in the sprite), using JS to set the background position seems… like not the right tool for the job.

A better approach in my experience is to use dedicated markup to contain the icon, something like:

<!-- autocomplete-container would have 'position: relative' -->
<div class="autocomplete-container">
  <input class="text-input" type="text" /><span class="icon-throbber"></span>
</div>
.

The icon container would have 'width' and 'height' declared so the sprite spacing is guaranteed not to be an issue. It can also be positioned correctly with just CSS. This is another issue that could benefit from http://drupal.org/node/1849712.

Sigh! 2 years old patch, no one review it.

@ryn5,

I was patched for D7 ( no markup changes), :)

@droplet I don’t understand #17. Can you elaborate?

override the css file with these value

For an idea, in the corolla subtheme.
This is an example to display no throbber when no load
and display a mythrobber.gif when there is load

html.js input.form-autocomplete {
background-image: none;
}

html.js input.throbbing {
background-image: url(../../../../misc/mythrobber.gif);
background-position: 98% 10px;
}

A better approach in my experience is to use dedicated markup to contain the icon, something like:

This is also what we're doing in system.base.css for the AJAX throbber CSS. +1 to r5yn's approach.

I can confirm that #14 javascript patch fix the problem on D7 (Bartik 7.22 and Garland 7.22).
My working solution uses the image contained in #10 because I have met some difficulties to patch the image file.

I've got a message for the patch #14: '... cannot be applied in the selected context', tried it with Drupal 7.23. The issue is showing up as a partially visible continuously spinning throbber, even when the autocomplete field is empty. This happens for D7.23 Bartik theme, in IE and Firefox particularly, wile looking good in Opera.

Status:Needs review» Needs work

The last submitted patch, 14: throbber-alignment-1069152-14.patch, failed testing.

The patch #10 (.gif replacement) fixes the issue (no continuous spinning), however:

  • it eliminates any spinning of throbber (e.g. when autocomplete is looking for matching)
  • the throbber is not aligned to the center of the field vertically

Issue summary:View changes
StatusFileSize
new5.86 KB
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch throbber-alignment-1069152-14-2.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]

This is the same patch from comment #14
Just fixing file paths so the patch can be applied by drush make

Status:Needs work» Needs review

Status:Needs review» Needs work

The last submitted patch, 26: throbber-alignment-1069152-14-2.patch, failed testing.

Version:8.x-dev» 7.x-dev

Status:Needs work» Needs review

Status:Needs review» Needs work

The last submitted patch, 26: throbber-alignment-1069152-14-2.patch, failed testing.

StatusFileSize
new5.86 KB

Setting to 7.x branch

Status:Needs work» Needs review

I think we would be better off splitting the gif into two separate files and using just CSS to position the throbbers.

The reason I say two files is because it is an animated sprite that is always animating even if you can't visible see it.

To see the problem, turn on painting using the Google Chrome Development Tools or Firefox's Development Tools and you will see the throbber is constantly being repainted.

To eliminate the extra http request maybe we can inline the two small files in the css? See http://css-tricks.com/data-uris/

What does everyone think?

Version:7.x-dev» 8.x-dev
Component:javascript» markup
Issue tags:-JavaScript
StatusFileSize
new3.6 KB
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch 1069152-throbber.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]

- Two separate image files
- Fixed GFX issue (padding issue)
- Fixed CPU issue

Status:Needs review» Needs work

The last submitted patch, 38: 1069152-throbber.patch, failed testing.

Status:Needs work» Needs review

38: 1069152-throbber.patch queued for re-testing.

Status:Needs review» Needs work

The last submitted patch, 38: 1069152-throbber.patch, failed testing.

StatusFileSize
new2.09 KB
FAILED: [[SimpleTest]]: [MySQL] 59,045 pass(es), 1 fail(s), and 0 exception(s).
[ View ]

Testbots error ?

Status:Needs work» Needs review

Status:Needs review» Needs work

The last submitted patch, 42: 1069152-throbber-for-testbots-only.patch, failed testing.

The last submitted patch, 42: 1069152-throbber-for-testbots-only.patch, failed testing.

@droplet - how about using a base64 encoded file in the css? That would eliminate the extra http requests for each throbber. Normally I use http://compass-style.org to do this.

Here is an example of what I'm talking about http://keegan.st/2012/09/14/easy-image-data-uris-with-compass/

Personally, I don't think we have to include 500 bytes (or around 3kb of 2 images) extra data to every site. And there's not used for any modules in D8 CORE. I will keep as it for now. :)

It seems like the testbot has problems at the moment, I will retest the patch soon.

38: 1069152-throbber.patch queued for re-testing.

The last submitted patch, 38: 1069152-throbber.patch, failed testing.

Status:Needs work» Needs review
StatusFileSize
new5.79 KB
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch 1069152-throbber-50.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]

Reroll

50: 1069152-throbber-50.patch queued for re-testing.

Triggered re-testing, the patch couldn't be opened in an editor.

Status:Needs review» Needs work

The last submitted patch, 50: 1069152-throbber-50.patch, failed testing.

Status:Needs work» Needs review
StatusFileSize
new5.97 KB
PASSED: [[SimpleTest]]: [MySQL] 59,873 pass(es).
[ View ]

Same as Patch #55 and updated to jQuery UI coding.

- Fixed new jQuery UI Autocomplete alignment problem

55: 1069152-throbber-55.patch queued for re-testing.

Triggered re-testing, I applied the patch to the folder /misc, however haven't noticed a difference in throbber appearance in autocomplete field.

in D8, you have to clear caches after any styles changes.

I thought the patch is for D7 as D8 is not ready for production use yet, and the problem does exist for D7.

This is Patch for D8 :)

I will add D7 Patch soon.

Please review it :)

55: 1069152-throbber-55.patch queued for re-testing.

55: 1069152-throbber-55.patch queued for re-testing.

55: 1069152-throbber-55.patch queued for re-testing.

StatusFileSize
new3.33 KB

Tested the patch with latest dev and works.
Maybe you should write a reasoning what you did and why with your patch.

As far as I can see, it divides the throbber into two images instead of one, so the image is always perfectly placed, even if the input field gets big:

Autocomplete Throbber

This looks great! Can't wait to see make its way back to D7.

agree, given that D7 version is the production platform of choice now ...

Issue summary:View changes

Issue summary:View changes

Status:Needs review» Reviewed & tested by the community

To RTBC this i guess it needs a code review. It being mostly in system.module.css and not in sevens css files seems right to me, but I don't know if there are any special policies as to which css files to use.'

The css itself cannot be much wrong: it is set to right and vertically centered. Not much more in here. So I'll be bold and set it RTBC, maybe this will trigger someone else to put it under scrutiny.

This is a great clean-up and we should move forward here.

That said, I see two issues that could be addressed in follow-ups:

  1. The throbber looks a bit squeezed to the right border.

    → Instead of 100%, we could consider to use 98% (or a fancy CSS trick, if there is any).

  2. I wonder why this is an animated GIF in the first place?

    → If we'd consider to put the throbber next to the input element (instead of inside), then CSS3 is simple as this:

    .throbber {
      animation: throbber-rotation 1s infinite linear;
    }
    @keyframes throbber-rotation {
      from { transform: rotate(0deg); }
      to   { transform: rotate(359deg); }
    }

    cf. http://jsfiddle.net/uv8a5/

    See also:

    http://37signals.com/svn/posts/2577-loading-spinner-animation-using-css-...
    http://aino.github.io/throbber.js/
    http://onwebdev.blogspot.com/2011/01/css3-background-rotate-property.html
    http://blog.freeside.co/post/42357804660/css-background-transformations

@sun: Great idea about using CSS animation instead! Filed #2181399: Consider moving the animated .GIF throbber outside the autocomplete fields and using CSS animation instead. for your suggestion (and gave credits to you for it).

Status:Reviewed & tested by the community» Patch (to be ported)

Nice work! Committed 8910339 and pushed to 8.x. Thanks!

Version:8.x-dev» 7.x-dev

Interestingly, I only noticed on my PC a few weeks ago that drupal.org's animated throbber was peeking through at the bottom of inputs in all of my browsers (in Ubuntu 12.04), which I never noticed previously. I wasn't sure if it was a site change or some visual configuration was changed on my setup.

StatusFileSize
new24.42 KB

Yep, still an issue and now that d.o runs on D7 it hits more users:

Component:markup» CSS
Status:Patch (to be ported)» Needs review
StatusFileSize
new5.78 KB
PASSED: [[SimpleTest]]: [MySQL] 40,745 pass(es).
[ View ]

StatusFileSize
new6.6 KB

Thanks for that patch. This is how the throbber field looks like on firefox 28 on ubantu 12.04.The issue seems to be solved.

Issue tags:+affects Drupal.org

Per #75

76: 1069152-throbber.patch queued for re-testing.