Fix faulty admin spinner animation #13700
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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.
|
|
|
Hello @RNanoware. That wasn't easy to spot this issue. Reproduced on FF Developer Edition. The fix works great. Thank you for the contribution. |
|
@RNanoware thank you for contributing. Please accept Community Contributors team invitation here to gain extended permissions for this repository. |
magento-engcom-team
pushed a commit
that referenced
this pull request
Feb 27, 2018
This was referenced Mar 19, 2018
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
When the
@spinner-delayvariable does not have a unit (s/seconds), the generatedanimation-delayattribute 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-delayand@spinner-animation-stepvariables 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
Sales>Operations>Orders..spinner > span:nth-child(8). Note that, unlike all of the othernth-childselectors in that category, the 8th and final selector'sanimation-delaydoes not have a unit of seconds. On browsers where units are required, that style will be marked as invalid.Proper Behavior
.spinner > span:nth-child(8)selector.