Strange scrolling div problem in WebKit browsers

[Jens]

Hi,

I have a strange problem and maybe someone here can give me a hint whats going on. Basically I have a custom composite that acts as a list. This list composite wraps a ScrollPanel which contains a AbsolutePanel that contains the list items positioned according to their height. The ScrollPanel has a ScrollHandler attached and everytime scrolling is detected the list will compute which list items are visible and only shows these. So its designed for a large dataset to speed things up by displaying only a small subset of the dataset (it was designed before CellList was available).

A list item is a simple div like:

<div class="GPHOOYDBNQ" title="title-of-that-list-item" listmodelidx="64" style="overflow-x: hidden; overflow-y: hidden; cursor: pointer; width: 100%; height: 21px; line-height: 21px; right: 0px; position: absolute; left: 0px; top: 1344px; ">String representation of list model item 64</div>

So I have some of these divs in my absolute panel which is in a ScrollPanel. Now when I move my mouse pointer over a list items text and try to scroll with the mouses scroll wheel nothing will happen. If I move the mouse pointer inside the list item out of the text into an empty area (list is wider than the list items text and div will use the full width of the list), scrolling will be done.

What might be the reason the browser thinks that he can not scroll or do not have to scroll the contents of ScrollPanel when my mouse is over a list items text but does scroll when its in an empty area inside the list/list item? I do not have any clue. It seems to happen in WebKit based browsers like Safari and Chrome. Firefox, Opera and IE are working fine.

Any Suggestions?

Thanks

J.

[Jens]

After some research I figured out that GWT's PopupPanel is probably responsible for that behavior. I have some wizard views which contain the custom list mentioned before and these wizards use a PopupPanel which is set to modal. I think there might be a bug in the way PopupPanels cancel events if the PopupPanel is set to modal. 

But its really strange that it only happens when the mouse cursor hovers text inside a ScrollPanel inside a modal PopupPanel. So maybe its more a WebKit bug.

J.

[dunha...@gmail.com]

On Thursday, April 21, 2011 2:38:51 AM UTC-7, Jens wrote:

After some research I figured out that GWT's PopupPanel is probably responsible for that behavior. I have some wizard views which contain the custom list mentioned before and these wizards use a PopupPanel which is set to modal. I think there might be a bug in the way PopupPanels cancel events if the PopupPanel is set to modal. 

But its really strange that it only happens when the mouse cursor hovers text inside a ScrollPanel inside a modal PopupPanel. So maybe its more a WebKit bug.

I tracked this down by stepping through the code in a javascript debugger.  The issue is in PopupPanel.eventTargetsPopup().  The mouse scroll event is coming through with a target of type "Text" rather than "Element".   

(You'll notice that the scrolling stops on the text, but in the rest of the div containing the text.) 

Changing the code to the following seems to fix it:

  private boolean eventTargetsPopup(NativeEvent event) {
    EventTarget target = event.getEventTarget();
    if (Node.is(target)) {
      return getElement().isOrHasChild(Node.as(target));
    }
    return false;
  }

But it might be better to tweak DOMImplWebKit.eventGetCurrentTarget() to return the parent of the target if the target is of type Text. (In case other code is expecting EventTarget to be an Element.)

 

[dunha...@gmail.com]

I think this was causing some issues with click events not being recognized, so I ended up adding this code to DOMImplWebkit to fix it:

  @Override
  public native EventTarget eventGetTarget(NativeEvent evt) /*-{
    var target = evt.target;
    if (target && target.nodeType == 3) {
      target = target.parentNode;
    }
    return target;
  }-*/;

[Jens]

Pretty cool, I haven't followed it anymore because I just changed my PopupPanel back to setModal(false) and live with it ;-)

Do you want to create a GWT issue for it on the issue tracker? Otherwise I'll do it.

-- J.

[dunha...@gmail.com]

On Wednesday, May 2, 2012 11:38:20 AM UTC-7, Jens wrote:

Pretty cool, I haven't followed it anymore because I just changed my PopupPanel back to setModal(false) and live with it ;-)

Do you want to create a GWT issue for it on the issue tracker? Otherwise I'll do it.

-- J.

Thanks, I just filed #7349