Flex was working out a lot better for me some ten years ago, in Mozilla extensions, as it was. There's just too many rendering glitches and performance problems with flex nowadays, so I've moved on to scripted layout. I just felt that someone should say it.
Solved by Flexbox
31–40 of 127 posts
Re: Solved by Flexbox
#32I suspect flex-time will be coming sooner than expected. flexbox is amazing!
I've used it everywhere on two production website, and we have had close to no issue with it. I'd say it's quite safe to start using them now.
Re: Solved by Flexbox
#33Solved by Flexbox creator here. I wanted to add that if you're using flexbox today, you should also check out this other repo of mine: https://github.com/philipwalton/flexbugs A community-curated list of flexbox issues and cross-browser workarounds for them.
Seems that mostly IE had these issues, which are now resolved in version 12. Chrome has only one issue, which seems to be already fixed in Canary.
Thank you for doing all this, that really helps spreading the word and accelerates web development!
Re: Solved by Flexbox
#34Flex was working out a lot better for me some ten years ago, in Mozilla extensions, as it was. There's just too many rendering glitches and performance problems with flex nowadays, so I've moved on to scripted layout. I just felt that someone should say it.
Can you elaborate on this? What rendering glitches did you encounter?
Re: Solved by Flexbox
#35Flex was working out a lot better for me some ten years ago, in Mozilla extensions, as it was. There's just too many rendering glitches and performance problems with flex nowadays, so I've moved on to scripted layout. I just felt that someone should say it.
Try writing idiomatic Flex rules based on the latest spec, and then running through PostCSS Autoprefixer. It smoothes out nearly all of the cross-browser glitches.
What performances issues are you talking about?
Re: Solved by Flexbox
#36Flex was working out a lot better for me some ten years ago, in Mozilla extensions, as it was. There's just too many rendering glitches and performance problems with flex nowadays, so I've moved on to scripted layout. I just felt that someone should say it.
Exact opposite experience. I like the newest CSS spec, and it is now supported in the vast majority of stable browsers in use.
It is an elegant approach to very common layout problems without any libraries, plugins, or javascript.
The whole point of markup and CSS is to solve the layout stuff for you. Javascript should be mainly for data transformation.
When you throw in web components and two-way data binding via object.observe, we can approach this ideal separation of concerns.
Re: Solved by Flexbox
#37Solved by Flexbox creator here. I wanted to add that if you're using flexbox today, you should also check out this other repo of mine: https://github.com/philipwalton/flexbugs A community-curated list of flexbox issues and cross-browser workarounds for them.
Hat's off to you, Philip. You are putting all your eggs in one flexbox basket--and now you are taking excellent care of that basket. I think that's a very smart approach; I particularly enjoy the approach of having a codepen to demo the bug, the workaround, and a link to the filed bug with the browser. It's so obvious, which means it's genius.
Re: Solved by Flexbox
#38Flex was working out a lot better for me some ten years ago, in Mozilla extensions, as it was. There's just too many rendering glitches and performance problems with flex nowadays, so I've moved on to scripted layout. I just felt that someone should say it.
Try writing idiomatic Flex rules based on the latest spec, and then running through PostCSS Autoprefixer. It smoothes out nearly all of the cross-browser glitches. What performances issues are you talking about?
Well, I made some code that would emulate flexbox in IE for a specific HTML structure (it would parse classnames in the HTML and not the CSS, the code is still around on https://github.com/wiredearp/spiritual-mix/blob/master/dist/...) but it turned out to run about a hundred times faster than the associated CSS flex that other browsers would use; even in those browsers. The layout must aspire to a certain complexity before it happens, that's why you don't notice it at first (and why I posted the comment). I just checked back with the issue called "Catastrophic flexbox perf" over on https://code.google.com/p/chromium/issues/detail?id=331352 and it appears that it's now a lot better in Chrome, but you can try to Ctrl+F for "hosted demo" on that page and open the demo in Firefox (you should save your work first!). When the page eventually does appear, you'll see that it's really nothing special, and certainly not worth the wait.
Re: Solved by Flexbox
#39Then there is the leading dots as commonly seen in tables of contents http://jsfiddle.net/hmquvmvp/
Re: Solved by Flexbox
#40Flex was working out a lot better for me some ten years ago, in Mozilla extensions, as it was. There's just too many rendering glitches and performance problems with flex nowadays, so I've moved on to scripted layout. I just felt that someone should say it.
Can you elaborate on this? What rendering glitches did you encounter?
There's one right now where a combination of flex and transform3d will cause things to simply disappear in Chrome and Safari but I haven't searched for any issues reported on that. The problem is progressively getting worse, so I'm almost sure you'll encounter it if you play around with those properties. I'm unfortunately not in a position to elaborate much further in this exact moment - but if this only happens to me, I really couldn't be happier!