search

awran5 / react-simple-star-rating

A simple react component for adding a star rating to your project.
https://react-simple-star-rating.vercel.app/
MIT License
136 stars 32 forks source link

Stars not filled on iPhone #48

Open zacBkh opened 1 year ago

zacBkh commented 1 year ago

Hello, Thanks a lot for the amazing library.

I have noticed on iPhone only the stars are not filled in yellow in static mode (readOnly) when displaying the rate. Please see the screenshot attached.

It works perfectly on Android phone, the issue appears only on iphone. Any idea what's happening?

image

Thanks!

vandercloak commented 1 year ago

I am having the same issue with Safari Version 16.5.1 (18615.2.9.11.7). It was working fine on 15.5, but since upgrading it is broken. Works great on chrome.

I believe it has to do with issue/support for display: -webkit-inline-box. I do not yet have a solution, but will post back if I find one.

vandercloak commented 1 year ago

I got it working... But its VERY hacky... but in the hopes it saves someone else some time, here is what worked for me:

<Rating
  emptyStyle={{ display: "flex" }}
  SVGstyle={{ display: "inline-block", marginBottom: 10 }}
  style={{ marginBottom: -10 }}
  ...
/>

The stars were positioned wrong for some reason and the two margin styles resolved it for me so they yellow stars showed up correctly.

vandercloak commented 1 year ago

I got it working... But its VERY hacky... but in the hopes it saves someone else some time, here is what worked for me:

<Rating
  emptyStyle={{ display: "flex" }}
  SVGstyle={{ display: "inline-block", marginBottom: 10 }}
  style={{ marginBottom: -10 }}
  ...
/>

The stars were positioned wrong for some reason and the two margin styles resolved it for me so they yellow stars showed up correctly.

Phongtesla commented 8 months ago

Spending an hour playing with it, i figured out this image