Project

General

Profile

Actions

Bug #66558

closed

Wobbly spinner in BE login form

Added by Jigal van Hemert almost 9 years ago. Updated over 5 years ago.

Status:
Closed
Priority:
Should have
Assignee:
-
Category:
Backend User Interface
Target version:
-
Start date:
2015-04-23
Due date:
% Done:

100%

Estimated time:
TYPO3 Version:
7
PHP Version:
Tags:
Complexity:
Is Regression:
No
Sprint Focus:

Description

The spinner in the BE login form (Verifying Login Data...) is a bit wobbly (at least in FF). I found that

 .fa { line-height: 1} 
seems to influence the rotation. Removing it / changing it to 1.3em (inherited from .btn-login) makes it rotate nicely.

Actions #1

Updated by Jan Helke almost 9 years ago

I think, that this is not our issue but an issue of Font Awesome.
If you check here: http://fortawesome.github.io/Font-Awesome/examples/ and zoom down, you'll see that in the "Animated Icons" section the same wobbling problem occurs. I would suggest to delegate that to the FA team.

Actions #2

Updated by Jigal van Hemert almost 9 years ago

I'm afraid it's indeed an issue of the icon font. We should keep an eye on
https://github.com/FortAwesome/Font-Awesome/issues/671

However, Dave Gandy mentions: "At a few font sizes, there's a bit of a wobble in all browsers (Icomoon has the same issue). Basically, if you keep it to multiples and half multiples of the optimized resolution (e.g. 14px, 21px, 28px, 35px), the wobble goes away."

If I increase the font size of the spinner in the login form from 12px (calculated by browser) to 14px the wobbling goes away in FF, Chrome and IE. Maybe we can use this workaround until it's fixed upstream?

Actions #3

Updated by Benni Mack almost 9 years ago

  • Status changed from New to Needs Feedback

Hey Jigal,

isn't this fixed with the new login API? could you re-check please?

Actions #4

Updated by Jigal van Hemert almost 9 years ago

  • Status changed from Needs Feedback to New

Still present, because it's not fixed in FA.

You can see the wobble effect demonstrated on http://fontawesome.io/test/ Near the bottom are some animated icons and some at sizes which have the most severe effect.

In the issue itself there is some advice about the font sizes which have the least amount of wobble. If we can use one of those sizes it will look a bit better.

Actions #5

Updated by Riccardo De Contardi over 8 years ago

On http://fontawesome.io/test/ it seems solved; but looking at the login page on latest 7.5.0-dev master, it is still present

Actions #6

Updated by Jigal van Hemert over 8 years ago

Riccardo De Contardi wrote:

On http://fontawesome.io/test/ it seems solved; but looking at the login page on latest 7.5.0-dev master, it is still present

Now on Windows 10 with latest Chrome, Firefox and Edge it's still present on that test page.

Actions #7

Updated by Gerrit Code Review over 8 years ago

  • Status changed from New to Under Review

Patch set 2 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at http://review.typo3.org/42876

Actions #8

Updated by Gerrit Code Review over 8 years ago

Patch set 3 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at http://review.typo3.org/42876

Actions #9

Updated by Gerrit Code Review over 8 years ago

Patch set 4 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at http://review.typo3.org/42876

Actions #10

Updated by Anonymous over 8 years ago

  • Status changed from Under Review to Resolved
  • % Done changed from 0 to 100
Actions #11

Updated by Benni Mack over 5 years ago

  • Status changed from Resolved to Closed
Actions

Also available in: Atom PDF