AngularJs pages aren't rendered properly

[amitaymolko]

Sample Url: https://musiclab.chromeexperiments.com/Experiments

Here is my class that is loading the page:

class PhantomJSHtmlToImageImp implements HtmlToImage {

    protected $client;

    public function __construct() {
        $this->client = Client::getInstance();
        $this->client->getEngine()->setPath(base_path('bin/phantomjs'));
        $this->client->isLazy();
        $this->client->getEngine()->debug(true);
    }

    public function getImageFromUrl($url)
    {
        //$url = "https://musiclab.chromeexperiments.com/Experiments";

        $width  = 500;
        $height = 500;
        $top    = 0;
        $left   = 0;
        $delay = 15;

        $tempFile = sys_get_temp_dir() . uniqid() . '.jpg';
        echo $tempFile;

        /**
         * @see JonnyW\PhantomJs\Http\CaptureRequest
         **/
        $request = $this->client->getMessageFactory()->createCaptureRequest($url);
//        $request->setDelay($delay);
//        $request->setTimeout(25000);
        $request->setOutputFile($tempFile);
        $request->setViewportSize($width, $height);
//        $request->setCaptureDimensions($width, $height, $top, $left);

        /**
         * @see JonnyW\PhantomJs\Http\Response
         **/
        $response = $this->client->getMessageFactory()->createResponse();

        // Send the request
        $this->client->send($request, $response);

        return $tempFile;
    }
}

As you can see i am using isLazy() i have also tried to add delay and timeouts but it didn't help.

The image saved:

[amitaymolko]

I realized that this issue only happens with certain sites that require specific browsers