Recently, I've been utilizing the ng2-rating module found at https://www.npmjs.com/package/ng2-rating. However, an intriguing issue has arisen specifically in Firefox - a mysterious gap between the filled stars and empty stars. Strangely enough, this gap only appears once the browser window is moved after the page has loaded.
Below are snippets of the HTML and CSS code that relate to this problem:
<span _ngcontent-rmx-4="" class="stars_rating rating_list_review"> <rating _ngcontent-rmx-4="" _nghost-rmx-6="" ng-reflect-readonly="true" ng-reflect-model="4" class="ng-untouched ng-pristine ng-valid">
<span _ngcontent-rmx-6="" aria-valuemin="0" class="rating readonly" role="slider" tabindex="0" aria-valuemax="5" aria-valuenow="4">
<span _ngcontent-rmx-6="">
<i _ngcontent-rmx-6="" data-icon="★" ng-reflect-class-name="star-icon half100" class="star-icon half100" ng-reflect-title="1" title="1">☆</i>
</span><span _ngcontent-rmx-6="">
<i _ngcontent-rmx-6="" data-icon="★" ng-reflect-class-name="star-icon half100" class="star-icon half100" ng-reflect-title="2" title="2">☆</i>
</span><span _ngcontent-rmx-6="">
<i _ngcontent-rmx-6="" data-icon="★" ng-reflect-class-name="star-icon half100" class="star-icon half100" ng-reflect-title="3" title="3">☆</i>
</span><span _ngcontent-rmx-6="">
<i _ngcontent-rmx-6="" data-icon="★" ng-reflect-class-name="star-icon half100" class="star-icon half100" ng-reflect-title="4" title="4">☆</i>
</span><span _ngcontent-rmx-6="">
<i _ngcontent-rmx-6="" data-icon="★" ng-reflect-class-name="star-icon half0" class="star-icon half0" ng-reflect-title="5" title="5">☆</i>
</span>
</span>
</rating>
</span>.stars_rating {
display: block;
text-align: center;
line-height: 2em !important;
}
.rating_list_review {
font-size: 14px;
}
@-moz-document url-prefix() {
.star-icon{
line-height: 28px !important;
}
}
.star-icon[_ngcontent-rmx-6] {
color: #ddd;
font-size: 2em;
position: relative;
}
If anyone has encountered a similar issue or has suggestions on how to resolve it, please share your insights. This puzzling gap dilemma is truly testing my patience!