[Resolved] Flexbox and Float look almost identical, but some little questions

[Jim]

After reading the blog entry on GP 3, I was ready for havoc and chaos, so I took the plunge into setting up staging and was ready for some major debugging. To my surprise, at first I couldn’t see any difference between the two. Everything lined up just fine with the same margins and such.

It didn’t make much difference on the page sizes (with inline css). Flexbox pages were 1-2 KB smaller. I had to search the source for “float” to make sure I was looking at different versions – the float pages had a few of them and flex pages didn’t. But I’ll definitely take your word on Flex being better.

Then, in both Firefox and Safari, I noticed that the text is a little bolder and clearer in Float than in Flexbox mode. White text seems whiter and thicker, dark text darker and clearer. I checked the text styles in the browser dev tools: color, size, weight, and height were the same in the two modes. Any idea what could cause that?

[Tom]

Hi there,

That URL seems to be using floats still – can you double-check?

Not sure what would cause the text clarity to change. We did add something to make text clearer – might be worth unsetting it to test:

html {
    -webkit-font-smoothing: unset;
    -moz-osx-font-smoothing: unset;
}

[Jim]

Sorry, I had something else go haywire about the time I upgraded to 3.0.1, so I reverted to 2.x, but it had nothing to do with the theme. I went back to 3.0.1 and it’s in Flexbox again.

Yes, using that css changes the text back. -moz-osx-font-smoothing: auto; does the same thing for me on Firefox/Mac. I personally prefer the text without the font smoothing and just left that css in place.

For some reason adding those properties in Firefox’s Inspector doesn’t work reliably in experimenting.

Thank you!

[Tom]

Glad that sorted it for you 🙂

[Author]

Posts