Checkbox label doesn't show when printing in IE 11

[cph11]

Environment Information

• Package version(s): "office-ui-fabric-core": "9.6.1-fluent2" "office-ui-fabric-react": "6.189.2"
• Browser and OS versions: IE 11 Windows 10

Please provide a reproduction of the bug in a codepen:

Unable to reproduce in codepen as IE not supported.

Issue can be replicated by printing the documentation page in IE 11.

https://developer.microsoft.com/en-us/fabric#/controls/web/checkbox

Example Print to PDF: cb.pdf

Issue only affects checkboxes after the first page.

Actual behavior:

Label associated with checkbox is not printed, unless on the first page.

Expected behavior:

The whole label associated with the checkbox should be visible regardless of page.

Priorities and help requested:

Are you willing to submit a PR to fix? No

Requested priority: Normal

Products/sites affected: (if applicable)

[ecraig12345]

Interesting... Does this happen in your site/app as well, or just on the website? I can also repro the issue on the website, but not in a codepen (if you sign in and save a pen, codepen offers a "debug view" option which works in IE 11).

Codepen debug view: https://cdpn.io/ecraig12345/debug/YzzXbVJ/LQkExyVvxmqA (if this expires, fork the original codepen https://codepen.io/ecraig12345/pen/YzzXbVJ?editors=0010 and generate a debug view link from that)

[cph11]

Yes, this also happens in my app (a SharePoint SpFx project)

I've tried reproducing the issue in Codepen using your method above, but without success so far. The issue only occurs after the first page. If you use the IE print preview function and shrink the page, the labels on the first page become visible.

On Thu, Oct 10, 2019 at 12:41 AM Elizabeth Craig notifications@github.com wrote:

Interesting... Does this happen in your site/app as well, or just on the website? I can also repro the issue on the website, but not in a codepen (if you sign in and save a pen, codepen offers a "debug view" option which works in IE 11).

Codepen debug view: https://cdpn.io/ecraig12345/debug/YzzXbVJ/LQkExyVvxmqA (if this expires, fork the original codepen https://codepen.io/ecraig12345/pen/YzzXbVJ?editors=0010 and generate a debug view link from that)

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/OfficeDev/office-ui-fabric-react/issues/10756?email_source=notifications&email_token=AKVBQSO6DQ6BGESL3P5XI5LQNZTY5A5CNFSM4I64LIGKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEAZZIFA#issuecomment-540251156, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKVBQSOBQCHA3BIN5JWSUHLQNZTY5ANCNFSM4I64LIGA .

[ecraig12345]

I tried updating the codepen to push the checkbox down onto a subsequent page using a really tall div, but the label still printed.

I also tried disabling this CSS reset style on the website, and I'm pretty sure that made the labels print properly once, but I haven't been able to reproduce it since then. (Adding the same style in the codepen had no effect, even if I set box-sizing on the parent div.)

*, *:before, *:after {
  box-sizing: inherit;
}

[cph11]

I've now managed to replicate the issue in codepen

Codepen debug view: https://cdpn.io/cph11/debug/NWWGPYE/vPMKKedYNqxM Codepen original: https://codepen.io/cph11/pen/NWWGPYE?editors=0010

The issue occurs when the Nav component is also used. If the Nav component is commented out the checkboxes render correctly.

[ecraig12345]

I tried the codepen but the labels still print fine for me in that case, at least when printing to PDF (which is what I've used for all the other testing). In case it makes a difference, when you repro'd the issue with that codepen, was it with print to PDF or a real printer? And did you use "Microsoft Print to PDF" or something else?

[cph11]

I tested used the Print Preview feature. But using "Microsoft Print to PDF" gives the same result (on page 2).

On Thu, Oct 17, 2019 at 12:58 AM Elizabeth Craig notifications@github.com wrote:

I tried the codepen but the labels still print fine for me in that case, at least when printing to PDF (which is what I've used for all the other testing). In case it makes a difference, when you repro'd the issue with that codepen, was it with print to PDF or a real printer? And did you use "Microsoft Print to PDF" or something else?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/OfficeDev/office-ui-fabric-react/issues/10756?email_source=notifications&email_token=AKVBQSMDA7ZMIMUAS2SMULLQO6TBLA5CNFSM4I64LIGKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEBOJL4Y#issuecomment-542938611, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKVBQSMVWZ7XIEXV6KPJPITQO6TBLANCNFSM4I64LIGA .

[cph11]

I'd sent a copy of the PDF produced by the "Microsoft Print to PDF" with my last comment, but I can't see it attached anywhere, so I'm including it here.

codepen.pdf

[ecraig12345]

Closing due to this being an extremely obscure issue and IE 11 nearing extended end of support (so this is not something we'd fix at this point)