Ratings component issue with half masks

[boian-ivanov]

Not sure if that's is an implementation issue on my side or if it's to do with the masks themselves, but when creating a star rating with half stars (it works flawlessly with full ones), I get a lack of in-between space on mobile devices and sometimes it's also replicable on desktop as well. I'm adding reproductions bellow of how it looks and the code that generates them as well.

This occurs from what I've seen from width of 768 to 784 in my example, but then it's always like this on a mobile device (both Chrome & Safari on iOS)

So I've been wondering what might be causing this issue. The markup for this exact bug is the following (with checked being applied for the first 7 in the above example):

<div class="rating rating-half">
  <input
    type="radio"
    name="rating-0.5804767042521979"
    class="mask mask-star bg-accent cursor-default mask-half-1"
    disabled=""
  /><input
    type="radio"
    name="rating-0.5804767042521979"
    class="mask mask-star bg-accent cursor-default mask-half-2"
    disabled=""
  /><input
    type="radio"
    name="rating-0.5804767042521979"
    class="mask mask-star bg-accent cursor-default mask-half-1"
    disabled=""
  /><input
    type="radio"
    name="rating-0.5804767042521979"
    class="mask mask-star bg-accent cursor-default mask-half-2"
    disabled=""
  /><input
    type="radio"
    name="rating-0.5804767042521979"
    class="mask mask-star bg-accent cursor-default mask-half-1"
    disabled=""
  /><input
    type="radio"
    name="rating-0.5804767042521979"
    class="mask mask-star bg-accent cursor-default mask-half-2"
    disabled=""
  /><input
    type="radio"
    name="rating-0.5804767042521979"
    class="mask mask-star bg-accent cursor-default mask-half-1"
    disabled=""
  /><input
    type="radio"
    name="rating-0.5804767042521979"
    class="mask mask-star bg-accent cursor-default mask-half-2"
    disabled=""
  /><input
    type="radio"
    name="rating-0.5804767042521979"
    class="mask mask-star bg-accent cursor-default mask-half-1"
    disabled=""
  /><input
    type="radio"
    name="rating-0.5804767042521979"
    class="mask mask-star bg-accent cursor-default mask-half-2"
    disabled=""
  />
</div>

Also, this is even worse when using the second available mask. Any ideas?

[saadeghi]

Thank you for reporting. iOS adds a border-radius by default.
It is now fixed in the last version of daisyUI: 2.50.0

[boian-ivanov]

That has fixed it, so thank you so much for your quick response! 👏
But there's a strange issue occurring on all browsers with half-stars, where you would get a line in between each star (or between each half-rating) and I cannot seem to understand what's causing it. In my mind, it might be to do with using the half mask for left and right and then sticking them together. I wonder if the behaviour might improve if there were 3 svg types, one for empty star, half-full and full. This way there wouldn't be a need to stick them together and this might not occur anymore, but that's mostly thinking out loud.
Here's the issue I'm talking about:

Mobile (Safari on iOS 16.x)

Desktop (Chrome 108.x on MacOS)

Both are rendering the mask-star-2 variation, but same happens with mask-star (as seen on the initial post), so I assume it's to do with the way browsers show the split version of the mask image svg, but I could be wrong.

[saadeghi]

That's strange. Do you see the same issue here as well?

This shouldn't happen because it's just 2 SVGs next to each other without any space between. And I can't see this issue on my Chrome (MacOS) or Safari (iOS)
Your screenshot looks like it has a space but it's less than a pixel so you couldn't find the root of issue, a hotfix would be adding a class like -space-x-[0.1px] to rating

[boian-ivanov]

I see what you mean. I've tried the playground and I can't for the life of me make it appear. For me this is a browser issue, but then again, if it's not appearing in the playground, it then seems like it could be an issue on my side. I'll play around with it, but I see what you mean with the spacing difference, although in order to completely remove it through it, I need more like 0.3px and then it goes in the other direction, so not ideal.
Thank you for the suggestion, it's definitely not an issue with Daisy, but then I'm curious may be causing it 🤔

[jamestolley]

I'm seeing this as well, with 4.5.0. Any idea what caused it for you? Thanks

[jamestolley]

I think it's due to a css transform / scale of the container.