[MGNLUI-3687] Dialogs show unnecessary scrollbars in some browsers Created: 30/Nov/15  Updated: 09/Feb/17  Resolved: 18/Aug/16

Status: Closed
Project: Magnolia UI
Component/s: dialogs
Affects Version/s: 5.3.11, 5.4.3
Fix Version/s: 5.3.16, 5.4.9, 5.5

Type: Bug Priority: Neutral
Reporter: Christoph Meier Assignee: Mikaël Geljić
Resolution: Fixed Votes: 1
Labels: devwl, next, support, ux
Remaining Estimate: 0d
Time Spent: 9d 5.5h
Original Estimate: 4d
Environment:

Tried on magnolia-enterprise-pro-demo-bundle; windows 7 professional


Attachments: PNG File 0364-By.xpath_(_div[_classIS'v_caption'_and_._span[text()IS'Name_(no_I18n)']])_following_sibling_input.png     PNG File 2049-By.xpath_(_div[_classIS'v_caption'_and_._span[text()IS'Text_2']])[1]_following_sibling_input[_typeIS'text']_notDisplayed.png     File MGNLUI-3687-dialog-scrollbars.yaml     PNG File add-page-dialog-demoauthor.png     PNG File chrom_2.PNG     PNG File chrome-3.png     PNG File chrome-4.png     PNG File chrome.PNG     PNG File first.png     PNG File ie.PNG     PNG File second.png    
Issue Links:
relation
is related to MGNLUI-3978 Dialogs show unnecessary scrollbars i... Closed
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:
Sprint: Saigon 57
Story Points: 8

 Description   

Dialogs show unnecessary scrollbars on Windows 7 Professional (the Magnolia Basel dev windows Laptop; Lenovo) and Mac

  • Chrome 46.0.2490.86 (the Magnolia Basel dev windows Laptop formerly setup by Federico). => issue; vertical and horizontal scrollbars
  • Chrome version 49 on Mac, Linux => issue; vertical and horizontal scrollbars
  • firefox 40.0.3: Scrollbars appear very shortly ... then disapperar => no issue
  • IE 11: only vertical scrollbars ... => not really an issue ... if possible, we should remove them


 Comments   
Comment by Mikaël Geljić [ 05/Jul/16 ]

On the Mac, it's easy to miss the scrollbar problems, because of the auto-hide scrollbar feature. But it should be disabled prior to investigating this:

  1. Open OS X Preferences > General
  2. Show scroll bars:
    • ◎ Automatically based on mouse or trackpad
    • ◎ When scrolling
    • Always
Comment by Hieu Nguyen Duc [ 07/Jul/16 ]

What I've seen so far is the v-shell-tabsheet-scroller (I call it scroller) has a redundant space exactly equals the scrollbar width (see the pictures below). Of course the scrollbar width is various on browsers and OS such as 15px on Chrome and 17px on IE.

+ Switching tabs has an animation that changes tab panel's styles and also affects the children inside e.g scroller.

+ It seems like the scroller's overflow needs to be controlled together with the transition animation based on the comparison between its max-height and height.

+ The PR I provide is a way to manually control it.

Comment by Hieu Nguyen Duc [ 20/Jul/16 ]

This issue will be resolved with just one small problem left in IE11.

Comment by Oanh Thai Hoang [ 22/Jul/16 ]

Fail UI Test:

Comment by Mikaël Geljić [ 28/Jul/16 ]

This was re-investigated, yet out of luck so far.

We discussed it w/ apchelintcev earlier this week; we concurred that animations play a part in that, that it's currently not trivial to synchronize them against the Vaadin layout phase. We could think about a couple ideas which may affect this in positive ways:

  • Usage of an animator Vaadin extension to coordinate layout vs. transitions
  • Refactoring of client-side forms; this is still pretty much reminiscent of the Vaadin 6 days, we believe we can gain something by trying to use more of Vaadin out-of-the-box again.

Meanwhile, this is postponed for now.

Comment by Aleksandr Pchelintcev [ 28/Jul/16 ]

FWIW, forcing layout upon animation finalisation helps reliably in this situation.

ApplicationConnection#forceLayout()

It's a costly operation (on the client-side), but maybe we could use it as a w/around in the mean time.
Otherwise I have a suspicion we are hitting a webkit issue, which is supposedly w/aroundable with Vaadin's utility:

WidgetUtil#runWebkitOverflowAutoFix()

Unfortunately, so far I didn't manage to make use of it.

Comment by Ngoc Nguyenthanh [ 08/Aug/16 ]

I have played around 5.4.x bundle.
Compared with Demo Author (running on 5.4.8). There is a issue with width of fields

  • When I open a light dialog which contains a text field. For example: Pages -> Add Page.
  • Try to type some characters on Page name. Let's observe the width of the field.
  • See attachment
Comment by Ngoc Nguyenthanh [ 11/Aug/16 ]

As discussed with mgeljic. I'm going to close this ticket and create a follow up MGNLUI-3978 for IE 11 on Windows 8

Comment by Ngoc Nguyenthanh [ 15/Aug/16 ]

Here is the status of QA

  • Scrollbar issue
    • Mac OSX - Chrome Version 52.0.2743.116 (64-bit):
      • 5.5: issue still there (ex: Security -> User)
      • 5.4: the same
    • Mac OSX - Firefox 50.0a2 (2016-08-14) : perfect
    • Windows 8 - IE 11 : issue still there
  • Issue with field's width mentioned above
    • 5.5: perfect
    • 5.4 still has the issue

I would move back this ticket to development.

Comment by Mikaël Geljić [ 16/Aug/16 ]

Just happened to look into it by chance, while playing around with the permission tool (had similar symptoms). PR seems to cure the issue.

Comment by Mikaël Geljić [ 16/Aug/16 ]

Much easier to reproduce with the case from the support ticket, by the way. Attaching such a YAML sample (two tabs, only one short field each), doesn't take much switching tabs to run into it.

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