[MGNLUI-125] Loading Icon is broken on iPad / iOS5 Created: 01/Nov/12  Updated: 11/Feb/13  Resolved: 16/Jan/13

Status: Closed
Project: Magnolia UI
Component/s: None
Affects Version/s: 5.0
Fix Version/s: 5.0

Type: Bug Priority: Neutral
Reporter: Mikaël Geljić Assignee: Mikaël Geljić
Resolution: Fixed Votes: 0
Labels: None
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Attachments: PNG File ipad-ios5-loading-icon.png    
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Bug DoR:
[ ]* Steps to reproduce, expected, and actual results filled
[ ]* Affected version filled

 Description   

GwtLoadingIcon technique doesn't work well on iPad/iOS5, won't work anyway on IE8, so I consider changing the technique used.

Current technique:

  • Icon font: the 8 bits of the loading icon are from the icon font. They are placed on top of each other with hacky negative letter-spacing:-2em;
  • CSS Animation: each bit is CSS-programmed with keyframes to render white half the cycle and grey the other half. each bit then starts the animation with a short delay to provide the clockwise spinning effect.

Other techniques to consider:

  • Animated GIF
  • SVG
  • keep current + gracefully degrade to one of these techniques.


 Comments   
Comment by Mikaël Geljić [ 16/Jan/13 ]

fixed on the vaadin7 branch.

This fix removes usage of letter-spacing to make the 8 bits overlap, instead it uses display block with height of 0.
This works well for positioning in most browsers including older webkits and opera.

Side note: this fix does not provide a compatibility replacement for browsers that don't support CSS animation.

Generated at Mon Feb 12 08:33:50 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.