function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
sumithasumitha 

Star Rating in Visual force page is not displayed in Firefox browser

Hi All,

Reference: https://codepen.io/rogie/pen/GIfqc

This Code is working perfectly in Google Chrome but it is not working in Firefox.
<apex:page standardcontroller="Account" sidebar="false" action="{!showRate}" showheader="false" docType="html-5.0" lightningStylesheets="true">
 <apex:form >
<apex:slds />
  <style>
.star-rating fieldset {
  font-size:0;
  white-space:nowrap; 
  display:inline-block;
  width:250px;
  height:50px;
  overflow:hidden;
  position:relative;
  background:
      url('data:image/svg+xml;utf-8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="20px" height="20px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve"><polygon fill="#DDDDDD" points="10,0 13.09,6.583 20,7.639 15,12.764 16.18,20 10,16.583 3.82,20 5,12.764 0,7.639 6.91,6.583 "/></svg>');
  background-size: contain;
}

.star-rating input { 
   opacity: 0;
   display:inline-block;
   width: 100%;
   height: 100%; 
   margin:0;
   padding:0;
   z-index: 2;
   position: relative;
}

.star-rating input:hover + label,
.star-rating input:checked + label {
     opacity:1;    
   }

.star-rating label {
   opacity: 0;
   position: absolute;
   left: 0;
   top: 0;
   height: 100%;
   width: 20%;
   z-index: 4;
   background: 
      url('data:image/svg+xml;utf-8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="20px" height="20px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve"><polygon fill="#FFDF88" points="10,0 13.09,6.583 20,7.639 15,12.764 16.18,20 10,16.583 3.82,20 5,12.764 0,7.639 6.91,6.583 "/></svg>');
   background-size: contain;
 }

.star-rating td ~ td label 
               {
  width: 20%;
  z-index: 8;  
}
.star-rating td ~ td ~ td label 
               {
  width: 30%;
  z-index: 7;  
}
.star-rating td ~ td ~ td ~ td label 
               {
  width: 40%;
  z-index: 6;  
}
 .star-rating td ~ td ~ td ~ td ~ td label
               {
                width: 50%;
         z-index: 5; 
               }
.star-rating td ~ td ~ td ~ td ~ td ~ td label {
  width: 60%;
  z-index: 4;
}
.star-rating td ~ td ~ td ~ td ~ td ~ td ~ td label {
  z-index: 3;
  width: 70%;
}
.star-rating td ~ td ~ td ~ td ~ td ~ td ~ td ~ td label {
  z-index: 2;
  width: 80%;
}
 .star-rating td ~ td ~ td ~ td ~ td ~ td ~ td ~ td ~ td label {
  z-index: 1;
  width: 90%;
} 
.star-rating td ~ td ~ td ~ td ~ td ~ td ~ td ~ td ~ td ~ td label {
  z-index: 0;
  width: 100%;
} 
               
.font
{
 font-size: 19px;
}
</style>
 <apex:selectRadio value="{!fr.RatingScore__c}" layout="lineDirection">
   <apex:actionSupport event="onclick" reRender="form"/>
                       <apex:selectOption itemValue="0.5"></apex:selectOption>
                        <apex:selectOption itemValue="1"></apex:selectOption>
                       <apex:selectOption itemValue="1.5"></apex:selectOption>
                        <apex:selectOption itemValue="2"></apex:selectOption>
                       <apex:selectOption itemValue="2.5"></apex:selectOption>
                        <apex:selectOption itemValue="3"></apex:selectOption>
                       <apex:selectOption itemValue="3.5"></apex:selectOption>
                        <apex:selectOption itemValue="4"></apex:selectOption>
                       <apex:selectOption itemValue="4.5"></apex:selectOption>
                        <apex:selectOption itemValue="5"></apex:selectOption>
  </apex:selectRadio>
</apex:form>
</apex:page>
Please Advice,

Thanks & Regards,
Sumitha P
 
vishal-negandhivishal-negandhi
The code works for me, even in Firefox. May be you need to update your browser?
sumithasumitha
Hi,

Even after update also the Star rating is not working on my end.
or Can you suggest any possible link with same functionality.
Please advice,

Thanks
Sumitha P
Illouz SamuelIllouz Samuel
Hi, I also have the problem !!! 
the issue is on user-adgent= safari or all IOS (Apple).
I find some forums on that but the star rating works only on double click ! 
if someone find the solutino please share !!!
_ Onclick event via Action Support not working in Safari (https://developer.salesforce.com/forums/?id=9062I000000BnDwQAK)
_ click-event-on-option-not-working-in-safari (https://stackoverflow.com/questions/52470432/click-event-on-option-not-working-in-safari)
_ /jquery-click-event-not-being-triggered-in-safari?rq=4 (https://stackoverflow.com/questions/472259/jquery-click-event-not-being-triggered-in-safari?rq=4)
_ /two-consecutive-click-events-not-triggering-the-change-event-on-safari-browsers (https://stackoverflow.com/questions/74170021/two-consecutive-click-events-not-triggering-the-change-event-on-safari-browsers)
_ /jquery-click-issue-on-safari-but-not-chrome?rq=3 (https://stackoverflow.com/questions/7678337/jquery-click-issue-on-safari-but-not-chrome?rq=3)
_ /click-event-in-safari-different-than-actual-click (https://stackoverflow.com/questions/13038404/click-event-in-safari-different-than-actual-click)
_ have-to-tap-twice-to-fire-event-link-with-ios?rq=3 (https://stackoverflow.com/questions/27050566/have-to-tap-twice-to-fire-event-link-with-ios?rq=3)
_ /why-when-do-i-have-to-tap-twice-to-trigger-click-on-ios (https://stackoverflow.com/questions/17710893/why-when-do-i-have-to-tap-twice-to-trigger-click-on-ios)
_ form-submit-and-onclick-behaviour-of-safari-desktop (https://stackoverflow.com/questions/76285222/form-submit-and-onclick-behaviour-of-safari-desktop)
_ onclick-event-in-select-html-not-working-in-safari (https://stackoverflow.com/questions/1769374/onclick-event-in-select-html-not-working-in-safari?noredirect=1&lq=1)
Guys I spend a lot of time ! please heeelp
Samuel