Safari/Chrome issues with pure-g class

[n0nag0n]

Just wanted to bring up some issues I've come across in my Pure adventures. I just upgraded to 0.4.1, but also this problem was happening on 0.3.0. The issue is that I wanted to make all the items within a pure-u-* class to be vertical-align: middle. I simple overrode the property and it works in Firefox 26. In Chrome 32.0/Safari 7, it doesn't recognize the vertical-align: middle until I remove the display: -webkit-flex attribute in the .pure-g class or change it to display: block. Chrome looks good after this, but Safari takes it a step further. Most of the grid classes are fine, but I have one group that makes the last pure-u-3-8 group wrap to the next line. The group with the issue is 1-8, 1-4, 1-4, 3-8 and it's the 3-8 that is wrapping, but only on Safari, possibly having to do with sub-pixel calculations. ( http://ejohn.org/blog/sub-pixel-problems-in-css/ ) Once I change .pure-u-3-8 width from 37.5% to 37.45% it (obviously) doesn't wrap anymore.

One other thing to note is I am using the padding to all pure-u classes with the code provided on the website.

.pure-g > div[class_="pure-u-"], .pure-g-r > div[class_="pure-u-"] {
padding: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

[n0nag0n]

One other thing I noticed is that if I resize the window the grids are freakin out all over the place in Safari. Even the little 37.45% width tweak doesn't hold when I resize it. At some widths, it works, and at others, it's atrocious :) In Chrome it doesn't freak out when resizing the window and not in Firefox either. If I re-enable the display: -webkit-flex, the weird resizing issues are gone.

Probably means I'm up a creek without a paddle if I want vertical-align: middle. :(

[tilomitra]

@n0nag0n Could you provide a JSFiddle so we can see the problem and try to debug?

[n0nag0n]

Sure, http://jsfiddle.net/2bzcL/ If you go to that one, I included the whole purecss file and at the very bottom, just made the one change to pure-u-1-4 (for the example) to vertical align: middle; In firefox it is aligned middle, in chrome it is not middle and same with safari. If you go to http://jsfiddle.net/2bzcL/1/ , I simple added a .pure-g { display: block; } and it now centers in all 3, but in safari when you resize the window, the crazy resizing issue happens. Hopefully that helps.

[jamesalley]

I created a new fiddle to illustrate a potential solution:

http://jsfiddle.net/james_alley/1gkucvng/

I gave it a perfunctory look in Chrome, FF, and Safari on Mac desktop. Note that I am using -webkit prefixes to achieve this. The "vertical align" flex box spec is currently under development within the W3C CSS Working Group, so it's not surprising that there might be differing implementations and that vendor-prefixing would be required.

In general aligning stuff vertically has, for ages, been harder than it should be, which is why they're working on this module for CSS. Simply using vertical-align: middle is no good; I'm surprised it worked the way you expected it to in Firefox, because in my past experience it was a property which would only affect table cells. Indeed, according to MDN, "The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box."

I appreciate the feedback, though; reading the cross-referenced #335 it seems like this is something we could incorporate in the future.

[walkerab]

Simply using vertical-align: middle is no good; I'm surprised it worked the way you expected it to in Firefox, because in my past experience it was a property which would only affect table cells.

I have been using vertical-align on elements other than table-cells for years. Browser support is very good. The MDN article you linked lists it as supported in IE4.

I'll admit the vertical-align property can be a bit confusing as it has a different meaning depending on the context in which it is used. If it is on a table-cell element, it will vertically center its contents while if it is used on some sort of inline element it will vertically align the middle of the element with the middle of the tallest element on the same line (note: you may also need to set vertical-align: middle on the tallest element in order for it to work).

Anyhoo, I'm a bit puzzled why you are saying it is "no good". Are you saying it is simply not compatible with flex-box?

[jamesalley]

Yep, that's exactly what I mean; it's only supposed to apply to align inline elements or table-cell contents.

I am keeping this issue open so that we can consider adding some helper classes to make this easier. Either way, we could add something to the documentation to explain how to achieve this.

[redonkulus]

Please check this issue on latest Safari/Chrome and let me know if its still an issue.