Phantomjs browser incorrectly computing css calc()

问题:

I am building Nightwatch tests (uses Phantomjs) for functioning front ends, and one of my tasks is to make sure banner images' heights are dynamic and their heights are being calculated correctly per the screen size.

I have some page elements that look something like this:

//html
<div class="bannerImg"></div>

//css
.bannerImg {
    background-image: url('someImgUrl');
    height: calc(100vh - 200); //some calculation here
    min-height: 600px; //some minimum height
}

For example, a viewport of 1080 should yield a height of 880px.

However when I run my test, Nightwatch is reporting the element's size to be 600px (essentially, bellow 600).

From my research on this, others have had other/similar difficulties with calc() and testing with the Phantom.js browser https://github.com/ariya/phantomjs/issues/13547

Is there any plans on adding support for this function?

回答1:

PhantomJS is no longer in active development, if possible you should migrate to puppeteer which was heavily inspired by PhantomJS.