Fancybox styles on all websites are modified when extension is installed

[GoogleCodeExporter]

What version of Chrome are you using? On what operating system?
Version 24.0.1312.60 m, Windows 8

What client (version?) are you connecting to? Are you using SSL?
ruTorrent v3.5 (but this is irrelevant)

What steps will reproduce the problem?
1. Check fancybox implementation on any website 
(http://fancyapps.com/fancybox/demo/ is a good example). Notice there is no 
drop shadow *inside* the opened lightbox.
2. Install Remote Torrent Adder.
3. Check fancybox implementation again - notice drop shadow has been applied. 
Chrome element inspector shows the following extra styles as "user stylesheet":

.fancybox-opened .fancybox-outer {
    -webkit-box-shadow: rgba(0, 0, 0, 0.498039) 0px 10px 25px;
    box-shadow: rgba(0, 0, 0, 0.498039) 0px 10px 25px;
}

What is the expected output? What do you see instead?

Obviously an extension such as this shouldn't be interfering with all websites 
in any way - I'm a web developer and got really confused trying to fix my own 
stylesheet before realizing the change on my own website was coming from my 
extensions!

If you could fix this I'd be grateful - I love the extension and don't 
want to have to use incognito mode for web development!

Original issue reported on code.google.com by andrew.d...@gmail.com on 17 Feb 2013 at 2:05

[GoogleCodeExporter]

Just did a little bit more looking into the cause of this.
It happens because you are loading the 2.0.4 fancybox CSS in your extension on 
all matched pages (which is, all pages). There were slight changes to the CSS 
between 2.0.4 and 2.1.4, so on sites which use the newer version, your included 
styles are also applied to the fancyboxes which already exist on that site, 
breaking the design.
(Here's a screenshot by the way: http://i.snag.gy/xsYiN.jpg )

Anyway, to fix it, remove 
"css": ["themes/jquery.fancybox.css"],
from your manifest file, and before this line in content_rta.js:
 $.fancybox("<div id=\"adddialog\"><h2>Select label and directory for torrent adding</h2>"+adddialog+"</div>");
add the following logic:

foundFancyBox=false;
CSSSheets=document.styleSheets;
for(j=0;j<CSSSheets.length;j++){
    for(i=0;i<CSSSheets[j].cssRules.length;i++){
        currentRule = CSSSheets[j].cssRules[i].selectorText;

        if(currentRule.indexOf("fancybox") !== -1){ 
            foundFancyBox = true;
        }       
    }
}
if(foundFancyBox==false) {
    $('head').append('<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.css">');
}

This just checks if there is already a "fancybox" rule in the stylesheets which 
exist on each loaded page, if not then it loads it from a CDN.

Hope this is ok ^^

Thanks,
Andrew

Original comment by andrew.d...@gmail.com on 17 Feb 2013 at 2:37

[GoogleCodeExporter]

oops, sorry for your troubles i guess.

your solution looks mostly good, i'll implement it as soon as i get to it.

Original comment by jul...@gmail.com on 28 Feb 2013 at 2:43

• Changed state: Accepted

[GoogleCodeExporter]

I ran into this issue with kickass.to

I installed the Stylish extension and added a custom css for that site.  Insert 
the following and save it.  I think all you need is the z-index, but this works.

#fancybox-overlay {
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
display: none;
z-index: 1001;
background: rgb(0, 0, 0);
}

Original comment by jpote...@gmail.com on 2 Sep 2014 at 8:58