Flex flow: row wrap; does not work #14365
Comments
Hi elsigh, I have exactly the same problem. I'm using PhantomJS v2.1.4, launched by a Protractor v3.2.0. |
same problem with latest phantomjs 2.1.1 |
I managed to fix it. I don't really understand why flex was broken while it used to work fine before. Hope it can help you. |
You can try editing my jsbin - can you find a combination of prefixes that On Fri, Jun 24, 2016, 01:32 anthonysalembier notifications@github.com
|
+1 same issue |
I'm using phantomjs to capture screenshots for a project I'm working on in Foundation. I was able to use @anthonysalembier's advice and add @elsigh: Using what was complied from Foundation I was able to get your jsbin running with the prefixes here: http://jsbin.com/jiniqirono/1/edit?html,output |
Same issue here with v2.1.1 using specifically:
|
+1 |
Next major version will support flexbox. |
Glad to here that! Is there a road map? Or maybe an alpha release i could build on Ubuntu 16.10? |
Another one here, I just started to use phantomjs today and noticed 2 problems which are both dealbreakers for me. flex-wrap: Basically milti-row stuff just doesn't seem to work. order: reversing the order of items doesn't work, which I use to reposition whole toolbars. Would love to know if there's a release date for the next version and which version of webkit it'll be bumped to. |
I also encountered this problem. I have to change phantom to slimer. But slimerjs is not turely headless and it is dependency on firefox. Hope this issue can be fixed soon |
+1 |
This CSS worked for me:
The key was |
@marcusmoore adding |
|
@elsigh, I'd actually recommend leaving this open to avoid future visitors thinking it's been fixed... |
@vitallium , is there any estimate on when is the next version going to be released? |
@reaktivo hard to say. I think I can build alpha version this weekend. So people can play with it. |
@vitallium did you manage to build the alpha version? safari >= 4 didn't fix my flexbox related issues, so I would like to try if the alpha version can fix them or if I will have to move to slimer. |
@leosprikryl We have correct for Windows and macOS. The last step before publishing the alpha version is Linux. |
+1 |
FYI: Safari work around works great Download from https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.5.0-beta-linux-ubuntu-xenial-x86_64.tar.gz and extract phantomjs to node_modules/phantomjs-prebuilt/bin/phantomjs works as well and no need for safari hack |
To install beta in Ubuntu 16.04 follow http://www.minnesotaithub.com/2017/03/how-to-install-phantomjs-2-5-beta-on-ubuntu-lts/ You might also need to install some libs like sudo apt-get update
sudo apt-get install libhyphen-dev Anyway, apparently the beta is not working with Webpack, React and babel-polyfill. It crashes with TypeError: SyntheticEvent.augmentClass is not a function. (In 'SyntheticEvent.augmentClass(SyntheticCompositionEvent, CompositionEventInterface)', 'SyntheticEvent.augmentClass' is undefined)
TypeError: __WEBPACK_IMPORTED_MODULE_6_react_dom___default.a.render is not a function. (In '__WEBPACK_IMPORTED_MODULE_6_react_dom___default.a.render(__WEBPACK_IMPORTED_MODULE_5_react___default.a.createElement(Application, null), document.getElementById('react-root'))', '__WEBPACK_IMPORTED_MODULE_6_react_dom___default.a.render' is undefined) |
phantomjs --version 2.1.1 flexbox layout doesn't work. Tried autoprefixer but still no luck. Finally I tried overriding the css property through js when phantomJS renders the view. See the following answer for details https://stackoverflow.com/a/45527170/8006311 |
change to use "display: -webkit-box;" ,just ok ! |
phantomjs --version
.2.1.1
Mac OSX El Capitan
binary
This is what a screenshot taken with phantomjs looks like.
I've tried a bunch of permutations with
-webkit-
et al, including webpack's postcss flexbox fixing attempts, and I'm at a loss.Here's what FF, Chrome, and Safari all render:
The text was updated successfully, but these errors were encountered: