[MGNLUI-4084] Tree scroll position is not properly maintained (Firefox/Chrome) Created: 22/Nov/16  Updated: 10/Dec/19  Resolved: 31/Jan/17

Status: Closed
Project: Magnolia UI
Component/s: tree/list
Affects Version/s: 5.4.6, 5.5
Fix Version/s: 5.3.18, 5.4.11, 5.5.2

Type: Bug Priority: Critical
Reporter: Mikaël Geljić Assignee: Hieu Nguyen Duc
Resolution: Fixed Votes: 5
Labels: chrome, firefox, scroll, tree
Remaining Estimate: 0d
Time Spent: 2d 5h
Original Estimate: 6d
Environment:

Firefox 49–50
Magnolia Demo


Issue Links:
Relates
relates to MGNLUI-3614 Tests needed: Chrome & Windows & Admi... Closed
causality
caused by MGNLUI-1328 CSS3 transitions are slow on iOS. Closed
duplicate
is duplicated by MGNLUI-4116 View scrolls back to the beginning up... Closed
relation
is related to MAGNOLIA-6922 Property scrolling up or down when up... Closed
is related to MGNLUI-5551 Tree scroll position jumps to the top 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
Release notes required:
Yes
Date of First Response:
Sprint: Saigon 79, Saigon 80, Saigon 81
Story Points: 8

 Description   

Trees have become less usable in Firefox "lately"—especially there seems to be an increase of "jumping" issues.

When using inplace-editing below the fold (in config-app)

  • hitting ENTER on property names or property values abnormally centers the selected row [1]
  • hitting ENTER on a node name scrolls back to the top
  • hitting ESC scrolls back to the top
  • hitting TAB doesn't jump at all

When using the context menu below the fold (via sang.ngo, thanks for reporting)

  • Right-clicking an unselected row abnormally centers that row [1]
    • Clicking aside to close it scrolls back to the top
  • Right-clicking a selected row doesn't jump at all
notes
  • Chrome now doesn't suffer the same symptoms
  • I could reproduce it also on 5.4.6, so it is well possibly caused by a change in recent Firefox versions, rather than inside the UI framework or Vaadin.

[1] I suspect the RowScroller to come into play here somehow


Update 2016.12.28

Chrome now suffers as well from scrolling back to top, albeit slightly differently:

  • hitting ENTER or ESC in inline-editing (TAB also doesn't jump)

upon any "indirect selection changes",

  • e.g. adding nodes, properties (unlike FF)
  • Right-clicking an unselected node (unlike FF's "centering effect")


 Comments   
Comment by Maxime Michel [ 15/Dec/16 ]

Thanks for the investigation, this is terrible.

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

viet.nguyen Thanks for the update; indeed Chrome got worse since I last tested it—it's also not affected exactly in the same ways.

I added an update section to the issue description and clarified:

  • inplace-editing interactions (which keys do what, TABbing is generally unaffected)
  • context-menu problems only show up for previously unselected rows
  • other interactions cause jumping back to the top (Chrome-only, indirect selection updates)
Comment by Hieu Nguyen Duc [ 18/Jan/17 ]

I've tested on Chrome 55.0.2883.95 (64-bit), Firefox 50.1.0 and IE11.0.96xxx.

Some problems don't happen in IE11:

  • Inline editing
    • Enter or click aside editing row.
  • Context menu
    • Right click unselected row
    • Click aside selected row to close the context menu

I've also tried to disable TreeRowScroller in TreeViewImpl and the bugs still happen.
=> The issue isn't related to RowScroller.

Comment by Mikaël Geljić [ 30/Jan/17 ]

Thank you hieu.nguyen for your PR, you got it right; I first doubted -webkit based properties would have any impact on Firefox, but believe it or not, they do. Here's the summary of the overall investigation:

The issue indeed came from our admincentral theme, where we turned on hardware-accelerated CSS transforms for tables/trees, back in MGNLUI-1328.

  1. This first caused Chrome to annoyingly scroll back to the top for a number of actions, e.g.
    • Adding new nodes, properties
    • Expanding items below the fold
  2. Firefox 49+ added support for `-webkit` prefixed versions of a number of CSS transform properties #wtf
    • see the footnote for CSS transform or backface-visibility, quoted below
    • This unexpectedly started to affect Firefox too, especially with respect to inplace-editing actions

In addition to the unprefixed support, Gecko 45.0 (Firefox 45.0 / Thunderbird 45.0 / SeaMonkey 2.42) added support for a -webkit prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true.

Comment by Mikaël Geljić [ 31/Jan/17 ]

Release notes (cc. mdrapela):

Fixed erratic scrolling in trees: a number actions caused the tree to jump back to the top, e.g. adding nodes, properties, or inplace-editing. These issues affected recent versions of Chrome, Opera and Firefox 49+.

Comment by Frank Sommer [ 31/Jan/17 ]

@mgeljic: Is there a way to hotfix this without upgrading the whole Magnolia application?

Comment by Mikaël Geljić [ 31/Jan/17 ]

frank.sommer, I guess there is. The Vaadin theme is configurable through the magnolia.properties, as magnolia.ui.vaadin.theme. See also Customizing the admincentral theme on documentation.

Either patch the precompiled styles.css from the admincentral theme from magnolia-ui-admincentral.jar!/VAADIN/themes/admincentral/styles.css, or recompile it from the Scss source.

New theme should be put on the classpath at /VAADIN/themes/yourThemeName/styles.css.
For the sake of completeness, I quickly looked up whether one needs to copy other resources along: no relative links from there, but the favicon.ico is looked up inside that configured Vaadin theme directory.

That should do the trick.
Cheers,

Comment by Vikas Attiguppa [ 31/Jan/17 ]

Hi,

We are having the same issue we are using 5.3.8 and i tried the patch method where in i copied the magnolia-ui-admincentral.jar!/VAADIN/themes/admincentral/styles.css text into a new style.css and removed the couple of lines that need to be deleted and put the file into our class path at /VAADIN/themes/Theme_name/styles.css. It does not seem to fix the issue. Is this the right way to do it?

Comment by Richard Gange [ 01/Feb/17 ]

Hi Vikas-

It sounds to me that you are trying to mix the 2 approaches. I provided you a patched version of magnolia-ui-admincentral jar on the support ticket. Could you give that a try?

Thanks
Rich

Comment by Mikaël Geljić [ 01/Feb/17 ]

I also confirm the theme approach does the trick. I just applied it to a 5.3 bundle, extracted the stylesheet, patched it and put it back into WEB-INF/classes into a renamed theme directory, eventually reconfigured in magnolia.properties.

The top-scrolling issues was gone; mind however that inplace-editing still performed significantly worse than on Magnolia 5.4+, especially tabbing seems to take the focus out of the table, instead of going to the next editable cell.
In fact, Magnolia 5.3 still uses a rather old Vaadin version (7.1), and is slowly reaching end-of-life.

Comment by Ronald Ten Berge [ 30/Nov/17 ]

Hi,

This bug seems to be back on Magnolia 5.6 in combination with FireFox 57.0 (64bit).

Comment by Karsten Martin [ 05/Dec/17 ]

Hi,

can confirm for Magnolia 5.5.6 as well.

greetings

Comment by Mikaël Geljić [ 07/May/18 ]

Hi karsten.martin, rtenberge,

So far we have been unable to reproduce the issue; does it still affect you? Would you mind shedding more details about the scenario and setup? In particular:

  • Which interaction causes the tree to jump back up
    • Does it simply jump or to the very top
  • Which app are you using
  • Which OS and FF version are you using
  • Are you using any custom Vaadin version or any custom theme
  • Can you reproduce it on https://demo.magnolia-cms.com

Many thanks,

Comment by Bradley Andersen [ 30/Jan/19 ]

Issue re-reported by Diamond Light Source: Magnolia 5.5.12 / Firefox (64.0.2).  Please see http://pvnp.us/IMG_1337.MOV.

 

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