Menu icon Foundation
Foundation.css on Chrome causes print command to reload flash object

When using a Flash SWF (for drawing or painting, for example) and then wanting to print the results, all browsers but Chrome do this with no problem. On Chrome, foundation.css is causing the Flash SWF to reload (thus emptying it)--whether from the File dialog or a print command from within the SWF. When I remove the foundation.css link href, the Flash SWF does not empty.

I've narrowed the issue down to line 3516 (at least, of our build).

When I comment out this line, while viewing large/medium, clicking print no longer causes the Flash object to reload. However...this line is necessary for hiding medium and large views while on a small device!

How is this to be solved? Why does this seemingly innocuous--though pivotal--line affect a Flash object when the print command is invoked on Chrome?

.hide-for-small-only, .hide-for-small-up, .hide-for-small, .hide-for-small-down, .show-for-medium-only, .show-for-medium-up, .show-for-medium, .hide-for-medium-down, .show-for-large-only, .show-for-large-up, .show-for-large, .hide-for-large-down, .show-for-xlarge-only, .show-for-xlarge-up, .show-for-xxlarge-only, .show-for-xxlarge-up {
display: none !important; }

chromeflashprintreloadrefreshfoundation.cssobjectembed

When using a Flash SWF (for drawing or painting, for example) and then wanting to print the results, all browsers but Chrome do this with no problem. On Chrome, foundation.css is causing the Flash SWF to reload (thus emptying it)--whether from the File dialog or a print command from within the SWF. When I remove the foundation.css link href, the Flash SWF does not empty.

I've narrowed the issue down to line 3516 (at least, of our build).

When I comment out this line, while viewing large/medium, clicking print no longer causes the Flash object to reload. However...this line is necessary for hiding medium and large views while on a small device!

How is this to be solved? Why does this seemingly innocuous--though pivotal--line affect a Flash object when the print command is invoked on Chrome?

.hide-for-small-only, .hide-for-small-up, .hide-for-small, .hide-for-small-down, .show-for-medium-only, .show-for-medium-up, .show-for-medium, .hide-for-medium-down, .show-for-large-only, .show-for-large-up, .show-for-large, .hide-for-large-down, .show-for-xlarge-only, .show-for-xlarge-up, .show-for-xxlarge-only, .show-for-xxlarge-up {
display: none !important; }
Designer about 4 years ago

This is also pointing to Chrome's own print preview function, which overrides the system print dialog. When the option key is held then File > Print, the system's print dialog is used and the Flash object does not reload. Serious, serious bug.

Rafi Benkual about 4 years ago

Might need a live demo to see what's happening. I don't work with Flash so I'm not sure how to effectively debug it but maybe we can connect you with someone who has.

Designer about 4 years ago

You can test it here:
http://www.abcya.com/abcya_paint.htm

We've found that if you reduce the encasing div size way down to about 400px wide using Chrome's inspector, the print functions seem to work. In medium and large views, Chrome's default print preview is crashing Flash (which is why it's reloading) but there's no [easy?] way to turn that off.

What is most perplexing is why that foundation.css line for .hide-for-small-only etc... is affecting this behavior. That's very strange indeed.

Designer about 4 years ago

Yet another update: the show-for-large (and variants) and show-for-medium (and variants) Foundation.css tags are causing Flash to crash on print. But these are obviously core foundation tags, so there is as yet no solution.

And one qualifier: even when these tags are disabled, the print preview is blank.

Designer about 4 years ago

I've discovered the specific issue that causes Chrome to crash Flash objects when it launches its print preview dialog:

Because enabling/disabling the .show-for-large-up and .show-for-medium-only tags (among others?) in foundation.css were modifying the behavior, I created our own Modernizr-enabled screen size detection function to hide/show our divs without Foundation's tags. When I did that, printing on Chrome worked as it should.

Then, thinking I didn't need to invoke Modernizr/JS functionality when Foundation's own CSS file already accomplished this using @media queries, I deleted that function and simply added in display: block for our new custom hide/show tags. This caused Chrome to once again crash Flash objects.

So the issue is that Chrome's print preview dialog crashes Flash objects when CSS is using @media queries to determine the visibility of [at least] large- and medium-view content divs.

I can't tell if this is a Foundation issue or a Chromium issue, but I'm leaning toward the latter as printing Flash objects works fine on Safari, Firefox and Explorer. Their print preview dialog is clearly the culprit here: it's not playing nice with Foundation's @media queries.