Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Forwardport] Fix faulty admin spinner animation #14182

Merged

Conversation

dimonovp
Copy link
Contributor

Original Pull Request

#13700

Description

When the @spinner-delay variable does not have a unit (s/seconds), the generated animation-delay attribute for the western spinner spoke also lacks a unit. In certain browsers (I am testing with Firefox Developer Edition 59.0b10 (64-bit)), this CSS style is marked as invalid and not applied, causing the western and south-western spokes of the spinner to flash out of order in the resulting animation. I assume that, somewhere in the LESS calculations, the @spinner-delay and @spinner-animation-step variables are combined with arithmetic, coercing the resulting spoke style to have the correct units: this coercion does not occur for the final spoke, perhaps because the arithmetic involved does not include the last child (for which the animation delay should be at a maximum).

In any case, the error is hardly noticeable, but there's no reason to let such a easily-fixable styling omission slip through the cracks.

Manual testing scenarios

Faulty Behavior

  1. Log in to a clean Magento 2.2 admin panel with the default adminhtml theme on Firefox Developer Edition 59.0b10.
  2. On the left sidebar, navigate to Sales > Operations > Orders.
  3. As the grid loads, note the incorrect order in which the western and south-western spinner spokes flash.
  4. Inspect the CSS and find .spinner > span:nth-child(8). Note that, unlike all of the other nth-child selectors in that category, the 8th and final selector's animation-delay does not have a unit of seconds. On browsers where units are required, that style will be marked as invalid.

Proper Behavior

  1. Repeat steps above. Verify that the spinner looks visually correct to the naked eye.
  2. Inspect the CSS to ensure that the proper unit has been added to the .spinner > span:nth-child(8) selector.

Contribution checklist

  • Pull request has a meaningful description of its purpose
  • All commits are accompanied by meaningful commit messages
  • All new or changed code is covered with unit/integration tests (if applicable)
  • All automated tests passed successfully (all builds on Travis CI are green)

When the @spinner-delay variable does not have a unit (s/seconds), the generated animation-delay attribute for the western spinner spoke also lacks a unit. In certain browsers (I am testing with Firefox Developer Edition 59.0b10 (64-bit)), this CSS style is marked as invalid and not applied, causing the western and south-western spokes of the spinner to flash out of order in the resulting animation. I assume that, somewhere in the LESS calculations, the @spinner-delay and @spinner-animation-step variables are combined with arithmetic, coercing the resulting spoke style to have the correct units: this coercion does not occur for the final spoke, perhaps because the arithmetic involved does not include the last child (for which the animation delay should be at a maximum).

In any case, the error is hardly noticeable, but there's no reason to let such a easily-fixable styling omission slip through the cracks.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants