[MGNLUI-4795] Icon flickers in Tab sheet Created: 15/Nov/18  Updated: 11/Mar/21  Resolved: 11/Mar/21

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

Type: Bug Priority: Neutral
Reporter: Hieu Nguyen Duc Assignee: Unassigned
Resolution: Won't Fix Votes: 0
Labels: None
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Attachments: File shakyTabsheet.mov    
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
Date of First Response:
Epic Link: M6 UI & UX Improvements

 Description   

While doing QA on "magnolia-enterprise-pro-demo-bundle-6.0-20181114.174006-589-tomcat-bundle", I found this moving tabsheet.

shakyTabsheet.mov

Flickering started when we added an SVG icon on the tabsheet. Flickering does not occur with icon fonts.

Vaadin's plain TabSheet also suffers from flickering icons.
To reproduce:

  1. Go to https://demo.vaadin.com/sampler/#ui/structure/tab-sheet
  2. Click the configuration cog and set tab icon to true.
  3. Click between tabs. 


 Comments   
Comment by Antti Hietala [ 14/Dec/18 ]

 Idea: Minimize the flicker by adding a min-width CSS rule to the icon element. The icon will still reload causing a slight flicker but the width of the element stays the same so the change is less visible and less distracting.

.v-tabsheet-framed > .v-tabsheet-tabcontainer img.v-icon[src$=".svg"] {
    width: 20px;
    padding-bottom: 3px;
    min-width: 20px;
}
Generated at Mon Feb 12 09:20:09 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.