Strange scrolling bug with hover/textshadow and Chrome mobile
Hi,
I've encountered a very strange problem and would like to know if this is a
jquery mobile issue or a browser issue. The problem only occurs in touch
environment and on Chrome, but not with Firefox.
Prerequisites:
- Use a modern Android phone or current Google Chrome with developer tools
and device mode set to e.g. Nexus 5
Detailed instructions:
* Open
http://jsfiddle.net/3fegnd2v/2/ in Chrome and open the developer tools (Ctrl-Shift-J)
* Select the "Toggle device mode" botton (next to the spyglass) and select "Nexus 5"
* Resize the content window to the right, so you can actually read anything
* Reload the page
* Click on the button "Wohnzimmer", then use the mouse wheel to scroll down the right part of the window ("WohnzimmerA")
* Click somewhere below the "Wohnzimmer" Button or on the "WohnzimmerA" Text
* => NOW THE PROBLEM HAPPENS - The content on the right will scroll to the top for no apparent reason.
I could nail it down to the "text-shadow" attribute of .ui-page-theme-c.ui-btn:hover in the CSS (down at the bottom of the CSS). When it is removed, everything works fine. (You can test at
http://jsfiddle.net/3fegnd2v/3/, where it is remoevd).
Now my questions:
- Is this a JQuery Mobile bug?
- Is this a Browser bug?
- What is happening (technically) to cause this behaviour?
thank you,