Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
New Contributor
Posts: 5
Registered: ‎03-19-2012
My Device: Bold 9930
My Carrier: Verizon

Web application trackpad mouseover event not working on 9930 for elements near bottom of page

[ Edited ]

Hi everyone,

 

I'm running into an issue on the 9930 (v7.0.0.374) where the mouseover event is not firing for an element that is near the bottom of the page. The following test page is an example: 

 

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">	
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0" />
    <title>Test App</title>
</head>
<body>

<input type="text" />
<input style="margin-top: 100px" type="text" />
<div style="font-size: 9px; background-color: red;" onmouseover="alert('mouseover')">Mouse Over</div>

</body>
</html>

 

There are a couple things I notice:

 

1. Using the trackpad to mouse over the bottom div in most cases does not set off the alert (although if I rapidly mouse over and mouse out of the div over and over it sometimes does fire).

 

2. This test page in particular was set up specifically so that all the content fits within the browser window, so there is no vertical / horizontal scrolling available. If I add some elements below the last div so that the content exceeds the browser window size, the mouseover event starts to work correctly for that bottom div.

 

3. By default, moving the mouse cursor into a textbox changes the cursor icon to a vertical bar and the textbox borders are highlighted, and then moving the mouse cursor out of a textbox changes the mouse cursor icon back to a pointer and the textbox border highlights are removed. 

 

However, when moving the mouse cursor vertically through the second textbox at the bottom of the test page, the "mouseover" cursor / textbox visual changes described do appear but continuing to move the mouse cursor downwards and out of the bottom of the textbox and beyond does not activate the "mouseout" cursor / textbox visual changes described.

 

4. If I move the bottom textbox / div up to the middle of the test page, they begin to behave normally.

 

5. I have tried this test on a 9700 (v6.0.0.668) and a 9810 (v7.0.0.583), and it works correctly for those devices.

 

Any thoughts on what the issue is? Please let me know if I can provide any more information.

 

Thanks!

New Contributor
Posts: 5
Registered: ‎03-19-2012
My Device: Bold 9930
My Carrier: Verizon

Re: Web application trackpad mouseover event not working on 9930 for elements near bottom of page

I just got a hold of a Bold 9900 (v7.0.0.250), which is quite similar to the Bold 9930 (v7.0.0.374) that I am seeing the issue with, and there are actually no problems on the 9900.

 

Could this be an OS-specific issue? Or, is there something wrong with my test application from my first post?

Retired
Posts: 1,382
Registered: ‎07-02-2009
My Device: BlackBerry Bold 9900
My Carrier: Bell

Re: Web application trackpad mouseover event not working on 9930 for elements near bottom of page

It very well can be an OS specific issue.  The 9900 and 9930 Smartphones have similar, but different OSs, and as a result there can be bugs that exist in one that are fixed in the other.

 

Is it always the bottom element that behaves erroneously?  i.e. if you add another DIV below your problematic one, does the error transfer to the lower-most DIV?

 

Finally - can you try tinkering with your viewport and see if that resolves it?  For the sake of this exercise, remove the viewport entirely and see if that resolves the problem (if so, I believe its a virtual layout scaling problem) for the 9930 device.

Follow me on Twitter: @n_adam_stanley
-------------------------------------------------------------------------------------------------------------------------
Your app doesn't work? Use BlackBerry remote web inspector to find out why.
New Contributor
Posts: 5
Registered: ‎03-19-2012
My Device: Bold 9930
My Carrier: Verizon

Re: Web application trackpad mouseover event not working on 9930 for elements near bottom of page

[ Edited ]

Hi astanley,

 

Thanks a lot for your reply.

 

It seems that every element below a certain line does not react to the mouseover event on the 9930. I tried placing a second div near the bottom of the screen, but neither of the bottom divs trigger the attached alert when mousing over.

 

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">	
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0" />
    <title>Test App</title>
</head>
<body>

<input type="text" />
<input style="display:block; margin-top: 110px" type="text" />
<div style="font-size: 9px; background-color: blue;" onmouseover="alert('mouseover1')">Mouse Over</div>
<div style="font-size: 9px; background-color: red;" onmouseover="alert('mouseover2')">Mouse Over</div>

</body>
</html>

 

I then tried removing the entire viewport meta tag from the above HTML. Both vertical and horizontal scrolling become available, and the mouseover event begins to work correctly.

Retired
Posts: 1,382
Registered: ‎07-02-2009
My Device: BlackBerry Bold 9900
My Carrier: Bell

Re: Web application trackpad mouseover event not working on 9930 for elements near bottom of page

Appreciate you trying it. Yes you have found an OS-specific bug (unfortunately).

 

What I thought was the issue is in fact the problem - the virtual viewport you have defined in the META tag is incorrectly interfering with the mouseover event.

 

Try this viewport instead?

 

<meta name="viewport" content="width=device-width,target-densitydpi=device-dpi,user-scalable=no,initial-scale=1.0">

 

 Note the "target-densitydpi" value was introduced in BB7 to allow Web developers to compensate for the enhanced screen resolution of BB7 Smartphones.

 

I'm curious if this bug is related.

Follow me on Twitter: @n_adam_stanley
-------------------------------------------------------------------------------------------------------------------------
Your app doesn't work? Use BlackBerry remote web inspector to find out why.
New Contributor
Posts: 5
Registered: ‎03-19-2012
My Device: Bold 9930
My Carrier: Verizon

Re: Web application trackpad mouseover event not working on 9930 for elements near bottom of page

Hi astanley,

 

I tried adding the viewport meta tag with the target-densitydpi. This changed the scale of the application, so I re-adjusted the spacing to put the mouseover divs near the bottom of the screen again. The issue also exists with this new viewport.

 

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">	
    <meta name="viewport" content="width=device-width,target-densitydpi=device-dpi,user-scalable=no,initial-scale=1.0">
    <title>Test App</title>
</head>
<body>

<input type="text" />
<input style="display:block; margin-top: 270px" type="text" />
<div style="font-size: 9px; background-color: blue;" onmouseover="alert('mouseover1')">Mouse Over</div>
<div style="font-size: 9px; background-color: red;" onmouseover="alert('mouseover2')">Mouse Over</div>

</body>
</html>

 

Highlighted
New Contributor
Posts: 5
Registered: ‎03-19-2012
My Device: Bold 9930
My Carrier: Verizon

Re: Web application trackpad mouseover event not working on 9930 for elements near bottom of page

Just a quick update on this one. I updated the 9930 to OS 7.1.0.163, and the issue is no longer there.

 

Anyway, thanks for your insight astanley!