search

dreyescat / bootstrap-rating

Bootstrap Rating is a jQuery plugin that creates a rating control that uses Bootstrap glyphicons for rating symbols.
http://dreyescat.github.io/bootstrap-rating/
MIT License
192 stars 78 forks source link

Interesting behavior in Safari with FA5 #34

Open enlivenapp opened 6 years ago

enlivenapp commented 6 years ago

Hi, I just found this and am excited to use it. Thanks for creating it.

I found what seems to be an interesting issue when using safari, Bootstrap 4, Font Awesome 5 and JQuery 3.2.1

https://use.fontawesome.com/releases/v5.0.6/js/all.js

Tested in Chrome, looks as expected: screen shot 2018-03-29 at 11 35 54 am

In Safari (latest), the filled stars drop down to the next line leaving blank space where the empty star was.
screen shot 2018-03-29 at 11 34 22 am

Code:

<div class="col-md-4">
    <h5 class="text-center">Rate:</h5>
<input type="hidden" class="rating" data-filled="fas fa-star fa-2x" data-empty="far fa-star fa-2x" data-fractions="2"/>
</div>
dreyescat commented 6 years ago

I would like to help, but I don't have any Mac available nor found an easy solution to test the latest Safari on Linux or Windows 😞. The last version for Windows, Safari 5, is too old.

I will try to borrow an iPad and see if I can reproduce it there :wink:.

Of course, if you feel comfortable and wish to contribute, feel free to create a pull request 👍.

tomlcooper commented 3 years ago

I have the same issue using Bootstrap Icons. The div class 'rating-symbol-background' is in the correct place, but 'rating-symbol-foreground' is below where it should be.