Giters

kartik-v / bootstrap-star-rating

A simple yet powerful JQuery star rating plugin with fractional rating support.

Home Page:http://plugins.krajee.com/star-rating

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Scrolling page can cause rating to adjust

JWess opened this issue · comments

commented

Prerequisites

  • I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
  • The issue still exists against the latest master branch of bootstrap-star-rating.
  • This is not an usage question. I confirm having read the plugin documentation and demos.
  • This is not a general programming / coding question. (Those should be directed to the webtips Q & A forum).
  • I have attempted to find the simplest possible steps to reproduce the issue.
  • I have included a failing test as a pull request (Optional).

Steps to reproduce the issue

  1. Put one or more of this plugin on a scrollable webpage.
    image

  2. On a mobile device, attempt to scroll the page up/down with swipes beginning on the stars.

Expected behavior and actual behavior

When I follow those steps, I see...
The star rating adjusts.

I was expecting...
The page to scroll without adjusting the star rating. As you can see in the screenshot, a lot of the screen is covered by instances of this plugin, which means the user is very likely to bump them when attempting to scroll the page. Other elements on a page (buttons, checkboxes, inputs, etc) do not have to be avoided when scrolling, thus this one shouldn't be either.

Environment

iPhone 6

Browsers

  • Google Chrome
  • Mozilla Firefox
  • Internet Explorer
  • Safari

Operating System

  • Windows
  • Mac OS X
  • Linux
  • Mobile

Libraries

  • jQuery version: v3.2.1
  • bootstrap-star-rating version: 4.0.1

Isolating the problem

  • This bug happens on the plugin demos page
  • The bug happens consistently across all tested browsers
  • This bug happens when using bootstrap-star-rating without other plugins
  • I can reproduce this bug in a jsbin
commented

I am open to suggestions. But this entirely seems like a UX styling issue for your application specific design. I feel you would need to use a CSS styling as per your device needs. For example padding your containers for scrolling and having smaller style stars OR highlighting users with appropriate message for touch based devices.

commented

Is there any way for the plugin to pay closer attention to the direction/speed of the swipe? If the stars are laid out in a horizontal direction, it seems like a vertical swipe shouldn't affect them.

commented

its not swipe but a click on the screen which you cannot control... imagine a checkbox on a screen and you start your swipe from the checkbox...