I need help diagnosing CSS issues in Chrome. I don’t even know how to diagnose this problem. I'm just curious what the next steps should take.
As for the solutions, I checked this question , but it is not very clear. I also tried this solution (turning off all styles and then turning it on), but it does not work. I do not think this question applies because we are not pulled from external domains, so this is not a cross-domain access problem.
Problem:
Chrome seems to be ignoring our alternative style sheet definitions. In our application, we use alternative style sheets and a Javascript routine to change the background color. This code worked and works still in Firefox and IE, but at some point it stops working in Chrome. Style sheets are defined as follows:
<link type="text/css" rel="stylesheet" title="white" property="stylesheet" href="/myapp/css/layer.css" />
<link type="text/css" rel="alternate stylesheet" title="silver" property="stylesheet" href="/myapp/css/medium.css" />
<link type="text/css" rel="alternate stylesheet" title="grey" property="stylesheet" href="/myapp/css/dark.css" />
<link type="text/css" rel="alternate stylesheet" title="beige" property="stylesheet" href="/myapp/css/beige.css" />
<link type="text/css" rel="alternate stylesheet" title="green" property="stylesheet" href="/myapp/css/green.css" />
The original definition of the body is here:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #282828;
height: 100%;
background: #fff url(../images/header-bg.jpg) center top no-repeat;
min-width: 1024px;
}
It is supposed to redefine (for example) in one of the alternative style sheets:
body {
background: url("../images/header-bg-dark.jpg") no-repeat center top #919194;
}
But this does not work in Chrome. I tried the following:
1) It is traced through JS-code and it is checked that CSS sheets become enabled / disabled correctly:
if (document.styleSheets.item(i).href.indexOf("medium") > -1) {
document.styleSheets.item(i).disabled = false;
} else if (document.styleSheets.item(i).href.indexOf("dark") > -1
|| document.styleSheets.item(i).href.indexOf("beige") > -1
|| document.styleSheets.item(i).href.indexOf("green") > -1) {
document.styleSheets.item(i).disabled = true;
}
2) I looked at the computed styles, and only the basic style shows that it, like Chrome, ignores other styles.
3) I tried to remove alternatefrom rel="alternate stylesheet"the definition part.
4) title (layer.css).
- ? , .