I have defined a javascript custom button. As soon as the button is clicked, the page should grey out. In mozilla firefox, the below code works as expected:

    var $j = jQuery.noConflict(); 

    var screen = '<div><div id="screen" style="position: fixed; width: 100%; height: 100%; left: 0px; top: 0px; z-index: 100; opacity: 0.7; background-color: rgba(150, 150, 150, 0.8); overflow: hidden; background-position: center; background-repeat: no-repeat;"></div></div>'; 

    $j('head').append('<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" type="text/css"/>');

function performAction() {
//some action

After this line of code I have called some methods to perform an action on Quote object.

In Chrome and IE, the grey area is visible after performing the action in method. In firefox, the grey area is displayed when I click the button.

Anyone have any idea why Chrome and IE behaviour is diffrent than Mozilla firefox?

How can I make this cosistent in all browsers?

  • did you tried installing fire bug saw the console for errors? – Avijit Chakraborty Jun 15 '17 at 16:57
  • In Chrome using inspect element I saw one error in Console, which was related to user agent. Error: Refused to set unsafe header "User-Agent" – sfdcdev Jun 15 '17 at 17:03

Depending on what you're doing, the browser may not redraw the screen right away. You can avoid this problem by allowing the browser a chance to catch up, typically using setTimeout:

setTimeout(performAction, 100); // wait 1/10th of a second

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.