0

I am attempting to fix a display issue in Chrome with rating stars.

I have two divs with background images. The star is 18px wide so I have made the bounding div 90px (18x5). Within that another div is dynamically specified to show filled stars equivalent to the rating.

The example widths I've set out in the fiddle are based on a real example from my site. In Chrome browser only, with a width of 90px the stars do not line up. However if I reduce this to 89px for some reason the stars do line up.

I am not seeing the same issues in IE or Firefox.

I'd prefer to keep the width at 90px if there is a solution for this because otherwise the last star is slightly cut off in Firefox and IE, but I'm really scratching my head on what is causing the misalignment now.

Why are the stars misaligned in Chrome only?

https://jsfiddle.net/3hs0pnsq/

<style>
    .rating {
        background: url('http://www.solarreviews.com/images/star-18.png') repeat-x 0 0;
        width: 90px;
        height: 18px;
        display: block;
    }
    .rating-star {
        background: url('http://www.solarreviews.com/images/star-18.png') repeat-x 0 -18px;
        height: 18px;
        display: block;
    }
</style>

<div class="rating">
    <div class="rating-star" style="width: 72px;">
    </div>
</div>

<br />

<div class="rating">
    <div class="rating-star" style="width: 84px;">
    </div>
</div>

<br />

<div class="rating" style="width: 89px;">
    <div class="rating-star" style="width: 72px;">
    </div>
</div>

Result:

star rating result

luckychii
  • 341
  • 4
  • 6
  • 1
    They look fine in Chrome Versión 54.0.2840.87 m (64-bit) / *Windows 10*. – Ricky Ruiz Nov 07 '16 at 05:04
  • That's the same version/os that I'm using. I've checked browser zoom too and it is at default 100% too. – luckychii Nov 07 '16 at 05:06
  • 1
    If I zoom in they do misalign though. – Ricky Ruiz Nov 07 '16 at 05:08
  • Thanks Ricky, that gave me the hint I needed to look further at the actual display and not at code. I don't know when/how, but my monitor settings had been adjusted. – luckychii Nov 07 '16 at 05:14
  • No problem! This made me want to create a rating component, which I did using an SVG spritesheet and jQuery. If you're interested here's the [**jsFiddle**](https://jsfiddle.net/rickyruizm/0fgv2ea1/). I can explain it in an answer if you want. I believe it's more semantic, easier to maintain and scalable than your current implementation. – Ricky Ruiz Nov 07 '16 at 05:20
  • Thanks for that Ricky_Ruiz. I definitely want to investigate SVG for this as it needs a rewrite (and would you believe the fiddle I put up is at least quarter of the size of the actual legacy code there now). We need to be able to show even the tiniest slivers of stars as some of our ratings go as detailed as 3.82/5 for example. Your example only shows full stars... can it do portions of? – luckychii Nov 07 '16 at 05:46
  • Not with that implementation. You would need to have a background that takes 100% of the `.rating` container, then fill that background accordingly. 3.82/5 would be 76.4% of the container, then apply 5 masks, or something similar to this [**answer**](http://stackoverflow.com/a/39729115/4305494). – Ricky Ruiz Nov 07 '16 at 06:22

1 Answers1

0

Though my browser was set to default 100% my display settings had been changed somehow to be zooming all text to 125% which was causing the strange issue in Chrome. Resetting the monitor display settings has fixed my issue.

luckychii
  • 341
  • 4
  • 6