scrollbars in a render are misplaced

[dudley ackerman]

when i render 'http://iiamtrilogy.com/', it puts scrollbars from 2 sections down the page in the wrong place near the top.

[James Greene]

Please include more information so someone might actually be able to help you (or at least confirm what you're seeing):

 - OS? Version?

 - PhantomJS version?  Download binary or compiled from source?

 - Small sample script that reproduces the problem?

Sincerely,
    James Greene

On Mon, Jul 1, 2013 at 1:14 PM, dudley ackerman <obo...@gmail.com> wrote:

when i render 'http://iiamtrilogy.com/', it puts scrollbars from 2 sections down the page in the wrong place near the top.

--
You received this message because you are subscribed to the Google Groups "phantomjs" group.
To unsubscribe from this group and stop receiving emails from it, send an email to phantomjs+...@googlegroups.com.
Visit this group at http://groups.google.com/group/phantomjs.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[dudley ackerman]

On Monday, July 1, 2013 11:14:05 AM UTC-7, dudley ackerman wrote:

when i render 'http://iiamtrilogy.com/', it puts scrollbars from 2 sections down the page in the wrong place near the top.

os x 10.8; phantomjs 1.9.1 - downloaded binary

code:

var page = require('webpage').create();

page.viewportSize = { width: 1024, height: 768 };

page.open('http://iiamtrilogy.com/', function (status) {

    window.setTimeout(function () {

        page.render('img.png');

        phantom.exit();

    }, 200);

});

 

[dudley ackerman]

works ok in phantomjs for windows 1.9.1

On Monday, July 1, 2013 11:14:05 AM UTC-7, dudley ackerman wrote:

[Joel Webber]

This is very much an issue on OSX. I'm seeing scrollbars rendered in odd places, both on the original poster's example, and my own app's tests.

I've filed https://github.com/ariya/phantomjs/issues/11605 to cover this -- as I mention in the issue, just having the ability to turn off scrollbar rendering altogether would fix every case I care about.

[James Greene]

Could you just inject a CSS blurb to the page to make the body (or relevant element) be `overflow: hidden;` before trying to render?

Sincerely,
    James Greene

[Joel Webber]

James,

That might work to some extent. Although to generalize over my testing system you'd have to walk the DOM and do this to all the scrollable elements. Then there's the issue that this will trigger layouts all over the place, likely disturbing the system under test so much that it might do more harm than good. And I'm not 100% positive, but I believe there are circumstances under which setting the overflow: property can actually disturb the scroll position (even if that's not true for most cases, it certainly is in cases where you have "fighting barely-scrollable x/y scrollbar" situations).

I realize that the WebKit platform layer gets pretty horrifying when it comes to dealing with native controls, and scrolling in particular. But given that it's already become common (on Macs, at least) to not have scrollbars take up any layout space, every platform wants to render scrollbars differently, and no one will interact directly with Phantom-rendered pages, I thought it might be worthwhile to consider not rendering scrollbars at all. There may be other issues I'm not thinking of, but it certainly seems like a simple solution to an otherwise-hairy problem.

Cheers,

joel.

--
You received this message because you are subscribed to a topic in the Google Groups "phantomjs" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/phantomjs/8xSCk8tfO9Y/unsubscribe.
To unsubscribe from this group and all its topics, send an email to phantomjs+...@googlegroups.com.

[Eneko Alonso]

Just wondering if there are any plans to solve this problem, or to add a command line parameter to avoid rendering scrollbars.

I've tried overflow:hidden on the body of the page, but that didn't stop the scrollbars from appearing in the middle of the capture.

Thanks,

Eneko