Results 1 to 8 of 8

Thread: Scroll position inconsistent on laptop with touch enabled

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    May 2017
    Posts
    27

    Default Scroll position inconsistent on laptop with touch enabled

    Hello, lately I noticed some weird behaviour on laptops with a touch screen. This is also reproducable in chrome using the "Laptop with touch" device settings.

    - When I scroll down with the mousewheel and click on a checkbox/radiobutton the page will trigger onTouchEnd and onDomScroll events with the position 0,0 even tho I'm in the middle of the page it will go back to top.
    - When I use the touch scroll the position is successfully saved and there is no jumping around when clicking on any component.
    - When I use touch scroll then scroll with the mousewheel and afterwards I click on a radionbutton it will jump to the position where the touch scroll ended.

    It seems that the position recording doesn't work when using standard mouse scroll on touch enabled devices.

    Is there a way (override) to save the positions on both events (touch scroll, mouse scroll)?

    I read alot concerning similar issues but besides a possible fix for ext 6.2.2 (EXTJS-23702) I found nothing useful. Also I couldn't find the ticket anywhere (I also got some premium support login).

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985

    Default

    That bug is referenced on this forum page:
    https://www.sencha.com/forum/showthread.php?335344

    Are you able to recreate the issue in this doc example?
    http://examples.sencha.com/extjs/5.1...ffer-grid.html

  3. #3
    Sencha User
    Join Date
    May 2017
    Posts
    27

    Default

    Hey, the reference doesn't really help as there is no solution provided. I don't see where the fix was applied for 6.2.2.

    Anyway I have to stick to 5.1. for now and I hoped to get the overwrite people were talking about in the thread for my version.

    Sadly I cannot reproduce the issue in the example as there is no checkbox or radiobutton clickable and I don't know how I could trigger the scroll event in there..

  4. #4
    Sencha User
    Join Date
    May 2017
    Posts
    27

    Default

    Another useful information: After setting a breakpoint in the onDomScroll function of the touchscroller the position.y is overwritten with dom.scrollTop.

    When I'm simply scrolling the scrollTop has always the correct number, no matter if I wheelscroll or touchscroll.

    When I scroll down using the mousewheel and click on a checkbox/radiobutton dom.scrollTop is 0 (If I use the touchscroll itself scrollTop has the correct position value).

    So the questions are:
    - Why is the position/scroll event even triggered on click/touch on a checkbox? (Is there any usecase where it should jump/adjust the position when checking a box?)
    - Where is the scroll event fired (I cannot see where this is comming from in the call stack)?
    - Why and where is the scrollTop of the dom element overwritten based on the condition if I scrolled with touch or with mousewheel?

  5. #5
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985

    Default

    Ah, sorry. I grabbed the 5.1 version of the example from that thread. Which version are you looking to patch?

    Ext JS 6.2.2 hasn't been released yet, but 6.5.0 has the fix as well (in classic/classic/src/grid/plugin/BufferedRenderer.js).

  6. #6
    Sencha User
    Join Date
    May 2017
    Posts
    27

    Default

    Well, I added some checkboxes to the example of yours and there is no issue with clicking them for some reason.

    I'm using ext 5.1.3.

    The problem is that within the TouchScroller.js the correct position values are getting overwritten with the wrong ones when clicking some element with an animation.
    Code:
    onDomScroll: function() {
        var me = this,
            dom, position;
    
        if (me.getTranslatable().isScrollParent) {
            dom = me.getElement().dom;
            position = me.position;
    // Here it's getting overwritten (position has the correct values but scrollTop was overwritten before somewhere)
            position.x = dom.scrollLeft;
            position.y = dom.scrollTop;
        }
        me.callParent();
    },
    Now it's really hard to track down where the wrong values get into dom.scrollTop. I found out that some translations are done in Ext.util.translatable.Abstract which sets the scrollTop to the position where the touchscroll currently is. Scrolling with the mousewheel leads to the touch position.y to be 0.

    Ext.util.translatable.Abstract
    Code:
    refresh: function() {
            this.translate(this.x, this.y);
        },
    This code is triggering the setScrollTop values later. this.y is the position.y value where I scrolled by touch dragging the screen. But I scrolled far further by mousewheel. Clicking an element will trigger this translate method which leads to a jumping to an incorrect position onDomScroll.

    This means that this.x and this.y is somewhere passed from to TouchScroller to this translation functions. It's taking the saved touch position instead of the real position.

    I don't think this is related to the bug I mentioned before anymore even tho people were mentioning weird position behaviour..

  7. #7
    Sencha User
    Join Date
    May 2017
    Posts
    27

    Default

    Yea, I think the Ext.util.translateble.Abstract is the problem in combination with the TouchScroller.

    The translatable has this.x and this.y not updated when scrolling with the mousewheel. It's only triggered by touch events.

    But since the touch on a checkbox triggers the translatable refresh function onIdle it also triggers the setScrollTop on the dom element which attachs the incorrect position (touchscroller position or 0 in case touch drag has not been used) to the dom element instead of taking the actual scroll position..

    Edit to summarize and a possible solution:
    - Both the normal scroller and the touchscroller working together updating the dom objects scrollTop position properly
    - The touchScroller uses Ext.util.translateble to do animations and update scrolling positions
    - The translateble default position is 0,0. On touchmove event this is updated with the correct positions
    - The normal scroller doesn't use translateble therefor the translateble x and y values remain 0,0 unless any touch operation takes place and updates those values.

    - Now, when using touchstart (tap) on a checkbox the translateble refresh function is triggered which updates the dom.scrollTop to 0 (or the value saved after touchmove)
    - When only using the mouse for scrolling before the tap this leads to a jumping behaviour to the top of the panel as the translateble class has the default values 0,0

    Possible solutions:
    1) using mouseWheel should properly update the translateble x and y values.
    2) Prevent using the translateble to trigger on touchstart (tap) event.

    It seems that browsers detect a mouse click on a touch enabled device as touchstart as well therefor it should be handled as a normal click.. Also pointerEvents is sometimes undefined on hybrid devices..

  8. #8
    Sencha User
    Join Date
    May 2017
    Posts
    27

    Default

    I have a temp solution for those who are interested. I personally don't like it as the translate method will be called twice for touch devices but it records the x/y values correctly in the translatable object as it's now called after every scrolling even (mousescroll, touchdrag):
    Code:
    Ext.define('Overrides.scroll.Scroller', {
        override: 'Ext.scroll.Scroller',
        privates: {
            fireScrollEnd: function(x, y) {
                this.callParent(arguments);
                // If touch and the translatable object is available re-exec the translate method to save the correct values.
                if (Ext.supports.Touch && this.getTranslatable()) {
                    this.getTranslatable().translate(-x,-y);
                }
            }
        }
    });
    The translatable object is only present if the object supports touch so there will hopefully no sideeffects for normal scrolling on a desktop device. Maybe the place where I put this isn't perfect - I'd rather have it somewhere only for the mousescrolling. Anyway I didn't want to further extent the code by adding the event's parameter to the function etc. Any proposuals are welcome.

Similar Threads

  1. Replies: 1
    Last Post: 26 Jul 2017, 2:49 PM
  2. Replies: 2
    Last Post: 5 Aug 2015, 9:08 AM
  3. Replies: 1
    Last Post: 27 Aug 2012, 2:37 PM
  4. inconsistent position showing popup.show(ele,pos)
    By harinanda08 in forum Sencha GXT Discussion
    Replies: 1
    Last Post: 16 May 2012, 1:09 AM
  5. get current scroll/drag position of sencha touch panel
    By scheid in forum Sencha Touch 2.x: Discussion
    Replies: 2
    Last Post: 3 May 2012, 11:39 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •