White screen in Safari and mobile Safari

[ip00]

Hi,

I have had an issue with safari and mobile safari on two recently built sites. You could only see blank white screen in it although in other browsers everything was working fine.

It was ok after we removed CSS lines, for clearing:

/* Clearing */
.clear:before,
.clear:after,
[class*="content"]:before,
[class*="content"]:after,
[class*="site"]:before,
[class*="site"]:after {
    content: '';
    display: table;
}

.clear:after,
[class*="content"]:after,
[class*="site"]:after {
    clear: both;
}

I'm not sure why this is happening in Safari. Something with the way we built our theme?

Thanks

[sixhours]

I'm not able to reproduce this with an unmodified copy of _s in Safari 6.0.4, so it's hard to say what the problem is without seeing the site(s) in question.

[ip00]

This is one of the sites: http://grobnik.info/mwp/

[eduardozulian]

Looks fine to me, @ip00. and I'm using Safari 6.0.4.

[andrewryno]

The rules are still commented out which would be why it's working. I'm trying to edit the stylesheet in Web Inspector but I'm not used to Safari so can't get it working.

[grappler]

I justed tested your site. I remove the comments and it stayed the same. I also took a vanilla install of _s on my test site and it also was fine in Safari on Windows.

[ip00]

Try now, css was commented out previously. Now I get blank page in safari, and mobile safari.

[grappler]

Ok, the issue is caused by modernizr. If you disable it you should see that there is no problem.

It would be good if _s was compatible with modernizr.

[ip00]

Disabling modernizr is not an option because it's used to detect if browser supports svg and some other things. This is not such a big issue for us, but it would be nice if you could make _s work with modernizer. Thank you all for your time.

[grappler]

Were you able to test it if it modernizr was the problem? Just to be 100% sure.

[codesardine]

it his modernizr because i have the same problem in crhomuim wen i activate it i get a blank screen, only the top wordpress bar displays if you loged in not realy shure wath the issue his needs further testing.

[codesardine]

ok just tested this in opera,chrome,firefox working fine under chromium i resolved my issue by disabling css classes in modernizr custom build under extras working fine now dont display a blank page anymore. (no further testing done)

[ip00]

Yes, I can confirm that it is a conflict with modernizr without any doubt. Modernizr version 2.6.2. Didn't have time too investigate further.

[sixhours]

The CSS for _s validates, so I'm going to close this, since it appears to be an issue with modernizr and not _s.

[ip00]

Modernizr adds class "generatedcontent" to HTML tag which is in conflict with _s CSS mentioned above.

[grappler]

The exact css that is causes the problem is.

[class*="content"]:before, [class*="content"]:after {
    content: '';
}

@sixhours Do you know why this css is included?

[sixhours]

It's a clear fix for any CSS class with "content" in the class name (site-content, entry-content, comment-content, etc.). I see how that would also apply to the "generatedcontent" class name in modernizr, but it seems like a bug in Safari -- why would this cause the screen to be blank?

html:before,
html:after { 
   content: ''
}

Try changing ="content" to ="-content" to make it more specific, I think that should fix it and allow the two to work side by side.

[philiparthurmoore]

Shouldn't we fix it in _s? What's the downside of appending - to the namespace?

[sixhours]

I don't see a reason not to change it, offhand, but I'm not sure why we branched out from the single "clear" class to clearing all elements of a type. Wanted to look at the history and do more research first.

[philiparthurmoore]

Sounds good.

[grappler]

I tested this and it works fine.

.clear:before,
.clear:after,
[class*="-content"]:before,
[class*="-content"]:after,
[class*="-site"]:before,
[class*="-site"]:after {
        content: '';
        display: table;
}

I could not find any html with the class name *-site. There were all site-branding, site-footer etc. content-area is excluded from the rule. Is this deliberate?

[sixhours]

This was the change: https://github.com/Automattic/_s/commit/b1d3b5369c9afcab564aeb388fe43430780f0d31

I see the reasoning, but I also wonder if selecting broad classes is the best approach if we want to avoid future conflicts, given this is a starter theme. There's no stopping a plugin or script from adding another class with "-content" someday, and it's not necessarily a unique class name or prefix.

Thoughts?

[sixhours]

I could not find any html with the class name *-site.

In this case, you'd use "site-", not "-site".

[mfields]

We could also use

rel^="content-"
rel^="site-"

to select classes that begin with these strings.

[andrewryno]

I like @mfields suggestion. You can't really be too picky about class names. If there is a plugin or other code that uses similar class names, it's not up to the starter theme to handle every use case, IMO.

[codesardine]

wath i usaly do i prefix every thing with my own name in this case ( _s-my-class-name ) it will never conflict with any other class names, but thats just my opinion.

[thegje]

This is still an issue in underscores on Safari, not even using modernizr: http://georgedurdy.com/wp/

[thegje]

Sorry, don't think it is a _s bug, just Safari again, not displaying background JPGs because they're saved as progressive.