Phantomjs: Flex flow: row wrap; does not work

[elsigh]

1. Which version of PhantomJS are you using? Tip: run phantomjs --version.
   2.1.1
2. What steps will reproduce the problem?
   
   
   
   1. Load http://output.jsbin.com/muwuhuwuna (demo page - http://jsbin.com/muwuhuwuna/edit)
   
   

display: flex;
flex-flow: row wrap;

1. Expect to see boxes laid out horizontaly, space permitting, and then wrapping
2. Instead see boxes as though flex-direction: column were used.
3. Which operating system are you using?
   Mac OSX El Capitan
4. Did you use binary PhantomJS or did you compile it from source?
   binary
5. Please provide any additional information below.
   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:

[anthonysalembier]

Hi elsigh,

I have exactly the same problem. I'm using PhantomJS v2.1.4, launched by a Protractor v3.2.0.
It used to work well before April, so I explored packages version used by Phantomjs but found nothing.
I keep looking for a solution.

[khanhzynga]

same problem with latest phantomjs 2.1.1

[anthonysalembier]

I managed to fix it. I don't really understand why flex was broken while it used to work fine before.
As I can see, phantomjs (2.1.1) uses an old webkit version.
In my project, I use Sass for my CSS and an autoprefixer that add prefixers for old browsers, I just add Safari 4 (seems to be the same webkit version of phantomjs) to my autoprefixer rules and it solved my flex problem. I found that node-sass changed version since the last successful build, maybe there is a change of the flex display that conduct to the problem.

Hope it can help you.

[elsigh]

You can try editing my jsbin - can you find a combination of prefixes that
works with it?

On Fri, Jun 24, 2016, 01:32 anthonysalembier [email protected]
wrote:

I managed to fix it. I don't really understand why flex was broken while
it used to work fine before.
As I can see, phantomjs (2.1.1) uses an old webkit version.
In my project, I use Sass for my CSS and an autoprefixer that add
prefixers for old browsers, I just add Safari 4 (seems to be the same
webkit version of phantomjs) to my autoprefixer rules and it solved my flex
problem. I found that node-sass changed version since the last successful
build, maybe there is a change of the flex display that conduct to the
problem.

Hope it can help you.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/ariya/phantomjs/issues/14365#issuecomment-228288227,
or mute the thread
https://github.com/notifications/unsubscribe/AAfkWv5as0WRaeyLHM7dmsQ1dCJMQi2-ks5qO5YDgaJpZM4I5NPu
.

[tjwebb]

+1 same issue

[marcusmoore]

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 safari >= 4 to my auto-prefixer settings and get my screenshots to match up with what I see in the browser.

@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

[bateller]

Same issue here with v2.1.1 using specifically:

display: flex; flex-direction: row; justify-content: space-between; margin: 2rem

[CaptainCannabis]

+1
Nothing related to flexbox seems to work. PhantomJS 2.1.1

[vitallium]

Next major version will support flexbox.

[CaptainCannabis]

Glad to here that! Is there a road map? Or maybe an alpha release i could build on Ubuntu 16.10?

[jon64digital]

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.

[jdneo]

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

[aliatsis]

+1

[Llorx]

This CSS worked for me:

.table {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
.table > div {
    -webkit-box-flex: 1 0 auto;
    -webkit-flex: 1 0 auto;
    flex: 1 0 auto;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    min-width: 0;
}

The key was min-width: 0;

[hillmanov]

@marcusmoore adding safari >=4 to my autoprefixer list also solved all of my flexbox issues. Thanks for that tip!

[elsigh]

safari >= 4 ftw

[msegado]

@elsigh, I'd actually recommend leaving this open to avoid future visitors thinking it's been fixed... safari >=4 is a good workaround for some users, but not necessarily for those using PhantomJS to interact with sites on which they can't change the CSS.

[reaktivo]

@Vitallium , is there any estimate on when is the next version going to be released?

[vitallium]

@reaktivo hard to say. I think I can build alpha version this weekend. So people can play with it.

[leosprikryl]

@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.

[vitallium]

@leosprikryl We have correct for Windows and macOS. The last step before publishing the alpha version is Linux.

[NickBeukema]

+1

[attiks]

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

[hisapy]

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)

[contacthrk]

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

[lgb020]

change to use "display: -webkit-box;" ,just ok !