NdYAG/react-rater

Problem rendering stars on some android devices

nrempel opened this issue · 4 comments

nrempel commented

Hi there,

I'm seeing an issue when rendering on some android devices. Have you seen anything like this?

Good:

bs_realdroid_mobile_google nexus 6-5 0-1440x2560

Bad:

bs_realdroid_mobile_samsung galaxy note 4-4 4-1440x2560

NdYAG commented

Hey Nick,
I've never seen this before. But maybe it's about the font. Try to give the container a proper font family on Android devices.
I am on my trip these days, sorry I cannot debug it for you recently. I will test the demo on Android once I go back.

nrempel commented

Thanks for the quick response!

I will try setting the font and let you know if that works.

NdYAG commented

Hi @nrempel
On my Nexus 5, it displays as expected. As the default star is an unicode shape, the 'bad' example you provide must be a font problem.

I will try to add an default font for the rater to solve this. You could also set default font family for it.

screenshot_20160923-164041

nrempel commented

Thanks for looking into it. It was a font issue in the end. A small number of android devices have a system font that doesn't fully support Unicode that the browser was falling back to.

The solution was to ensure the use of a web font that supports the Unicode character. I'm using Open Sans which doesn't support the character so I used Roboto for just the star rendering and now it works reliably.

Sorry, I forgot to update the ticket when I discovered this!