Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Clear Fix/Modernizr Problems in Safari (6.0.5) #284

Closed
seansean11 opened this issue Aug 13, 2013 · 9 comments
Closed

Clear Fix/Modernizr Problems in Safari (6.0.5) #284

seansean11 opened this issue Aug 13, 2013 · 9 comments

Comments

@seansean11
Copy link

@seansean11 seansean11 commented Aug 13, 2013

I want to start this out by saying _'s is awesome and thank you so much for making it.

I had a client today tell me that their site was showing up as a blank white canvas in Safari. After investigating I realized that the display table on the psuedo-elements in the clearfix was causing the html element (with a white bg) to be rendered with a higher z-index than the rest of the page and consequently cover the entire page with white.

The reason this occurred was that the [class_="site"] and [class_="content"] selectors when used in unison with Modernizr will select the "generatedcontent" class that is added to the html element. As a regular user of _'s I would prefer that the css didn't contain these selectors out of the box, so that I can choose my clearfixes, but wouldn't you be able to get the job done using the "^" selector instead of "*" in this case? I would be open to making a fix, but not sure what your course of action will be.

@SDavisMedia
Copy link
Contributor

@SDavisMedia SDavisMedia commented Aug 13, 2013

I can't imagine anything being a better solution besides targeting the elements specifically. Using "^" would fix your issue but could easily cause a similar issue with the next install's classes considering "content" is commonly used.

I agree that the attribute selectors should be avoided if possible... especially with such common terms like "content." Other attribute selectors included in _s, like [class*="navigation"], at least have or are descendant selectors.

@seansean11
Copy link
Author

@seansean11 seansean11 commented Aug 13, 2013

Yea, I understand the difficulty there ([class*="site-"] might also be another option). Maybe I'm mistaken, but I would think that many (maybe even most) _'s users also have Modernizr installed. These more specific selectors may help prevent future interferences, although it won't solve the problem.

After checking, I realized that another one of my client sites also has the same issue.

@grappler
Copy link
Collaborator

@grappler grappler commented Aug 13, 2013

This was discussed here too. #212

@seansean11
Copy link
Author

@seansean11 seansean11 commented Aug 13, 2013

Thanks, and sorry for the repeat bug report. I think I'm just going to use my own base CSS with _'s from now on, in order to avoid any future complications.

@obenland
Copy link
Member

@obenland obenland commented Aug 21, 2013

@grappler suggest to go with that:

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

I'd be fine with that. It would fix the issue, correct?

@seansean11
Copy link
Author

@seansean11 seansean11 commented Aug 23, 2013

Hmmm....I'd have to look into the theme a little bit more, but I do see a selector used right off the bat of "content-area" which must be selected by this clearfix currently. With that new star selector rule, it would be left out. There is probably a nice and organized way about the process if you were to analyze the selectors being used and where clearfixes should be applied out-of-the-box.

I think that starting a theme with "*" selectors which are so generalized could be dangerous for development. So, it might be a more philosophical question of when, if at all, these clearfixes should be applied to the theme. Or, maybe we can just place the blame on Safari for the issue. For some reason setting pseudo elements to display table on the html element in Safari causes z-index problems, but I haven't seen this in any other browsers.

@emiluzelac
Copy link
Contributor

@emiluzelac emiluzelac commented Sep 5, 2013

You can substitute

*
with
^

@Brendonwbrown
Copy link

@Brendonwbrown Brendonwbrown commented Sep 10, 2013

Thank you very much. I was scratching my head over this very problem.

@obenland obenland closed this in dff92a0 Sep 12, 2013
@ElShaddai
Copy link

@ElShaddai ElShaddai commented Nov 6, 2013

Thanks very much for tracking this down. I had it nailed down as far as a conflict with Modernizr, but you've saved me many hours!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
7 participants