5

I have a Chrome extension that injects a DIV into each page, and styles that DIV with a style sheet included in the extension. On some pages, the injected DIV looks as intended, but on others it doesn't. One the StackOverflow site, for example, the box-shadow property of my elements is overridden, despite the fact that it is specifed as ! important in my CSS.

When I inspect the element in question, Chrome tells me that the box-shadow property is not applied (it is shown struck-through), but it does not tell me why: nothing in the cascade of styles specifies that property.

When I added the box-shadow property directly to the elements (without the benefit of a CSS class), the CSS inspector view showed that the properties are associated with the element, but the effect is still absent.

UPDATED: code snippets:

Here is what I specify in my code:

    var $bar = $('<div>').addClass('pp_bar').css({
        'box-shadow': '-1px 0px 2px 1px #444',
        '-moz-box-shadow': '-1px 0px 2px 1px #444',
        '-webkit-box-shadow': '-1px 0px 2px 1px #444'
    });

Here is the CSS:

.pp_bar {
    height: 80%;
    right: -4px;
    top: 0px;
    position: absolute;
    box-shadow: -1px 0px 2px 1px #444 ! important;
    -webkit-box-shadow: -1px 1px 2px 1px #444 ! important;
    -moz-box-shadow: -1px 1px 2px 1px #444 ! important;
}

Here is what Chrome shows as the computed style:

-webkit-box-shadow: #444 0px 0px 1.2000000476837158px 0px;
    element.style - rgb(68, 68, 68) -1px 0px 2px 1px
    .pp_bar - rgb(68, 68, 68) -1px 1px 2px 1px user stylesheet

You can see that the value used (#444 0px 0px 1.2000000476837158px 0px) is different from the element style (as assigned in my code; the element style overries the class values (which are the same). Without the element style setting, the class values are shown struck out.

On sites in which this works correctly, the browser reports the following in the computed style:

-webkit-box-shadow: #444 -1px 1px 2px 1px;
    element.style - rgb(68, 68, 68) -1px 0px 2px 1px
    .pp_bar - rgb(68, 68, 68) -1px 1px 2px 1px user stylesheet

What should I try next?

Gene Golovchinsky
  • 6,101
  • 7
  • 53
  • 81
  • I've starting seeing something similar, but for me, the stylesheets aren't even loading, and only on some sites. Can you tell if your div even has the user stylesheets applied to it? Look at the list of stylesheets under the computed style: Is your CSS listed? – Eyal Nov 13 '12 at 14:36
  • possible duplicate of [How to really isolate stylesheets in the Google Chrome extension?](http://stackoverflow.com/questions/12783217/how-to-really-isolate-stylesheets-in-the-google-chrome-extension) – anderspitman Aug 07 '14 at 17:45

1 Answers1

0

Set the style on the element itself, with the !important flag. Then, you can know for sure that the style is being applied on the element with the highest priority.

Examples:

var div = document.createElement('div');
// Pick any of these (the first two lines have identical results)
div.style.setProperty('box-shadow', '0 0 3px red', 'important');
div.style.cssText += 'box-shadow: 0 0 3px red !important';

// If the HTML is generated from a string:
div.innerHTML = '<div style="box-shadow:0 0 3px!important;">...</div>';

Non-example (does not work!):

div.style.boxShadow = '0 0 3px red !important'; // Does not work!

If you cannot afford to set the inline styles, try to achieve a higher specifity at your CSS selectors, by including an ID for example.

Rob W
  • 341,306
  • 83
  • 791
  • 678
  • My understanding was that inline styles already had highest priority, and the browser does show the inline style no struck out. (But not acted upon either.) I am confused about what's happening. – Gene Golovchinsky Oct 18 '12 at 16:44
  • @GeneGolovchinsky Show a small example which demonstrates your problem. I don't have the time to recreate your problem from scratch. – Rob W Oct 18 '12 at 17:44
  • I added code snippets. I am not sure that it's practical to put up an entire extension, but if necessary, I can add a screenshot of the misbehavior. Note that this odd behavior occurs on multiple sites; stackoverflow is one example. – Gene Golovchinsky Oct 18 '12 at 18:12
  • @GeneGolovchinsky At least mention which element on Stack Overflow you're inspecting. If possible, you'd better create a self-contained example which demonstrates the problem, for future reference. – Rob W Oct 18 '12 at 19:14
  • The elements affected by this are injected by my chrome extension; they don't occur in the web page. I will try to put together a short chrome extension, but it's a bit of a nuisance to deploy those. – Gene Golovchinsky Oct 18 '12 at 19:53