jamescryer
commented
7 years ago Sorry for the late reply.
Unless you're clearing your floats I would expect the container to collapse to 0 height, thus failing to create a meaningful screenshot. This would also be true in the 'real world', though perhaps wouldn't be a problem without content below the component.
It seems that CasperJS simply doesn't create a screenshot in this case, perhaps that's wrong? If this is still a problem for you, please consider raising the issue against that project.
Screenshot fails on container of floated elements (and possibly any null-height container) requiring extra (hacky) css to provide a height for the container.
Flexible height works: https://github.com/Equiem/phantom-demo/blob/master/docker/tests/test.js#L13 Produces screenshot: https://github.com/Equiem/phantom-demo/blob/master/docker/screenshots/test-flexible-height.png
Set height works: https://github.com/Equiem/phantom-demo/blob/master/docker/tests/test.js#L13 Produces screenshot: https://github.com/Equiem/phantom-demo/blob/master/docker/screenshots/test-set-height.png
Null height fails: https://github.com/Equiem/phantom-demo/blob/master/docker/tests/test.js#L25 Does not produce a screenshot.
[debug] [phantom] Capturing page to /usr/app/screenshots/test-float-left.png with clipRect {"height":0,"left":0,"top":454.78125,"width":1024} [error] [phantom] Failed to save screenshot to /usr/app/screenshots/test-float-left.png; please check permissions