Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Firefox Screenshots 'Full Screen' not working on Airtable form

more options

Love the great new feature of Firefox Screenshots - useful to take shots of full pages rather than screen captures.

It doesn't work on airtable forms which is on place it would be really useful for me eg. https://airtable.com/shrcLBYFthQs5WrSQ

It just takes a shot of the visible area of the page even when selecting Full Screen.

I've tried on mac and windows - I've tried turning it off and on again in about:config, I couldn't see any <frameset> tags which are reported not to work.

Any clues?

Love the great new feature of Firefox Screenshots - useful to take shots of full pages rather than screen captures. It doesn't work on airtable forms which is on place it would be really useful for me eg. https://airtable.com/shrcLBYFthQs5WrSQ It just takes a shot of the visible area of the page even when selecting Full Screen. I've tried on mac and windows - I've tried turning it off and on again in about:config, I couldn't see any <frameset> tags which are reported not to work. Any clues?

Chosen solution

I hate pages like this where they use tricky layout. What they've done is use style rules to fix the page height to the visible viewport height (height:100%) and suppress the rest of the page (overflow:hidden). You can inject a little style rule hack to override this once you know the problem. I realize this isn't a convenient or universal solution, but maybe it will help from time to time.

While you have the page open:

(1) Open the Style Editor in the Developer Tools. Either:

  • Shift+F7
  • "3-bar" menu > Web Developer > Style Editor
  • (menu bar) Tools > Web Developer > Style Editor

(2) At the upper left corner above the list of files, click the + button to create a new sheet

(3) In the blank editing area on the right, paste this rule that overrides overflow:hidden

html, body, div {
  overflow: visible !important;
}

Firefox should apply it within a few moments.

You can close the Developer Tools now, either by clicking the little X button at the right end of the Developer Tools toolbar, or by pressing Command+Alt+i or F12.

(4) Create your screenshot and in the preview, you should have the entire page

Note: this kind of "hack" is only in effect until you reload the page, so if something goes terribly wrong, and it wouldn't cause you to lose data, you can always reload.

Read this answer in context 👍 1

All Replies (3)

more options

Chosen Solution

I hate pages like this where they use tricky layout. What they've done is use style rules to fix the page height to the visible viewport height (height:100%) and suppress the rest of the page (overflow:hidden). You can inject a little style rule hack to override this once you know the problem. I realize this isn't a convenient or universal solution, but maybe it will help from time to time.

While you have the page open:

(1) Open the Style Editor in the Developer Tools. Either:

  • Shift+F7
  • "3-bar" menu > Web Developer > Style Editor
  • (menu bar) Tools > Web Developer > Style Editor

(2) At the upper left corner above the list of files, click the + button to create a new sheet

(3) In the blank editing area on the right, paste this rule that overrides overflow:hidden

html, body, div {
  overflow: visible !important;
}

Firefox should apply it within a few moments.

You can close the Developer Tools now, either by clicking the little X button at the right end of the Developer Tools toolbar, or by pressing Command+Alt+i or F12.

(4) Create your screenshot and in the preview, you should have the entire page

Note: this kind of "hack" is only in effect until you reload the page, so if something goes terribly wrong, and it wouldn't cause you to lose data, you can always reload.

more options

Note that you can also use a JavaScript bookmarklet to toggle this style rule.

javascript:/*style::toggle*/(function(){var L='s-overflow',S='html,body,div{overflow:visible!important;}',SS,E=document.querySelector('style[id="'+L+'"]');if(E){E.parentNode.removeChild(E)}else{SS=document.createElement('style');SS.setAttribute('type','text/css');SS.id=L;SS.textContent=S;document.querySelector('head').appendChild(SS)}})()

more options

Thanks heaps for the fast response @jscher2000! Very handy trick. I wonder if the fullscreen screenshot function could overide 'overflow:hidden' somehow? Because seeing the overflow what doesn't fit on the screen is its best purpose. But this does the job for now thanks heaps!