Phantomjs: Flexbox centering doesn't work

1

I've tried many approaches, none seems to work, like: display: flex, display: -webkit-flex;

Problem is that the text appears at the top of the page instead of the middle.

Example files:
http://pastebin.com/2hx9e7yT
http://pastebin.com/H7uRKjYV

I'm using PhantomJS 1.9

tiborsaas picture tiborsaas  ·  10 Jul 2014

Most helpful comment

7

On phantom 2.1.1 and neither syntax works at all.

JacksonGariety picture JacksonGariety  ·  4 Jun 2016

All comments

0

try using the early spec syntax:

  display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: center;
    -webkit-box-align: center;

Early flex spec howto:
http://www.html5rocks.com/en/tutorials/flexbox/quick/
Using Phantom 1.9 I was able to get this working.

efx picture efx  ·  28 Aug 2014
7

On phantom 2.1.1 and neither syntax works at all.

JacksonGariety picture JacksonGariety  ·  4 Jun 2016
0

on 2.1.1 linux x64 build flex-direction column isn't working as expected

[Edit] - narrowed down the issue to when you are using multiple browser prefixes

display: flex;
flex-direction: column;
works on linux

but

display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
-webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;

does not

enpfeff picture enpfeff  ·  6 Jun 2016
0

See #14365

tuxayo picture tuxayo  ·  3 Aug 2016
0

+1

aliatsis picture aliatsis  ·  11 Oct 2016
1

Could you please try again with 2.5 binary? Thanks!

vitallium picture vitallium  ·  11 Jan 2017
0

Manual work-around works, 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

attiks picture attiks  ·  9 Mar 2017
0

Due to our very limited maintenance capacity (see #14541 for more details), we need to prioritize our development focus on other tasks. Therefore, this issue will be automatically closed. In the future, if we see the need to attend to this issue again, then it will be reopened. Thank you for your contribution!

stale[bot] picture stale[bot]  ·  28 Dec 2019