Known Issue: Print dialog issues in Safari and Firefox

Reproduction Steps

HS-193247
Create a certificate
Open in Safari
Print the cetificate

Expected Behavior

The orientation and size of the certificate should made the settings in the certificate and be confined to a single page

Actual Behavior

the orientation defaults to portrait and splits into two pages:

When switching to landscape the certificate is still partially broken:

Error Messages / Logs

Include any relevant error messages or log files


<!-- Paste error logs / backtraces below this line -->


### System and Environment Information

<details>
<summary>System Report</summary>

<!-- Paste your System Report between the three backticks below this line -->

Wordpress

Home Url: https://winter-mud.myliftersite.com Site Url: https://winter-mud.myliftersite.com Login Url: https://winter-mud.myliftersite.com/wp-login.php Version: 5.9.3 Debug Mode: No Debug Log: No Debug Display: Yes Locale: en_US Multisite: No Page For Posts: Not Set Page On Front: Not Set Permalink Structure: /%postname%/ Show On Front: posts Wp Cron: Yes

Settings

Version: 6.5.0 Db Version: 6.5.0 Course Catalog: Course Catalog (#13) [https://winter-mud.myliftersite.com/courses/] Membership Catalog: Membership Catalog (#14) [https://winter-mud.myliftersite.com/memberships/] Student Dashboard: Dashboard (#16) [https://winter-mud.myliftersite.com/dashboard/] Checkout Page: Purchase (#15) [https://winter-mud.myliftersite.com/purchase/] Course Catalog Per Page: 9 Course Catalog Sorting: menu_order Membership Catalog Per Page: 9 Membership Catalog Sorting: menu_order Site Membership: Not Set Courses Endpoint: my-courses Edit Endpoint: edit-account Lost Password Endpoint: lost-password Vouchers Endpoint: redeem-voucher Autogenerate Username: no Password Strength Meter: no Minimum Password Strength: Terms Required: no Terms Page: Not Set Checkout Names: Checkout Address: Checkout Phone: Checkout Email Confirmation: no Open Registration: yes Registration Names: Registration Address: Registration Phone: Registration Voucher: Registration Email Confirmation: no Account Names: Account Address: Account Phone: Account Email Confirmation: no Confirmation Endpoint: confirm-payment Force Ssl Checkout: no Country: IE Currency: USD Currency Position: left Thousand Separator: , Decimal Separator: . Decimals: 2 Trim Zero Decimals: no Recurring Payments: yes Email From Address: team+sandbox@lifterlms.com Email From Name: A LifterLMS Sandbox Email Footer Text: Email Header Image: Cert Bg Width: 800 Cert Bg Height: 616 Cert Legacy Compat: no

Constants

LLMS_REMOVE_ALL_DATA: undefined LLMS_REST_DISABLE: undefined LLMS_SITE_FEATURE_RECURRING_PAYMENTS: undefined LLMS_SITE_IS_CLONE: undefined

Gateways

PayPal: Enabled PayPal Test Mode: Enabled PayPal Logging: yes PayPal Order: 1 Manual: Enabled Manual Logging: no Manual Order: 1

Server

Mysql Version: 5.7.38 Php Curl: Yes Php Default Timezone: UTC Php Fsockopen: Yes Php Max Input Vars: 5000 Php Max Upload Size: 512 MB Php Memory Limit: 256M Php Post Max Size: 1024M Php Soap: Yes Php Suhosin: No Php Time Limt: 30 Php Version: 8.0.18 Software: Apache/2.4.53 (Unix) OpenSSL/1.1.1 Wp Memory Limit: 256M

Browser

HTTP USER AGENT: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.4 Safari/605.1.15

Theme

Name: Twenty Twenty Version: 1.9 Themeuri: https://wordpress.org/themes/twentytwenty/ Authoruri: https://wordpress.org/ Template: Child Theme: No Llms Support: No

Plugins

Beaver Builder Plugin (Lite Version): 2.5.3.1 Block Visibility: 2.4.2 Code Snippets: 3.1.0 LifterLMS: 6.5.0 LifterLMS Assignments: 1.3.0 LifterLMS Groups: 1.0.0-beta.20 LifterLMS Labs: 1.6.0 LifterLMS PayPal Gateway: 1.4.0 LifterLMS Private Areas: 1.1.5 LifterLMS WooCommerce: 2.2.2 Redirection: 5.2.3 Regenerate Thumbnails Advanced: 2.4.0 WooCommerce: 6.5.1 WP Fusion: 3.40.5 WP Mail Logging: 1.10.4 WP Rollback: 1.7.1

Integrations

BbPress: No BuddyPress: No LifterLMS Groups: Yes WooCommerce: Yes LifterLMS Private Areas: Yes

Template Overrides



</details>

This issue has be recreated:
+ [x] Locally
+ [x] On a staging site
+ [ ] On a production website
+ [ ] With only LifterLMS and a default theme

### Browser, Device, and Operating System Information

+ Safari

@nrherron92 the root source of this issue is that Safari (and also Firefox) do not support the @page:size CSS declaration, which is what we utilize to determine the print dimensions. It's an "experimental" css rule but it is implemented 3/5 "major" browsers: https://developer.mozilla.org/en-US/docs/Web/CSS/@page/size

This rule was chosen to replace other methods used before 6.0 (using body/html element width/height to "tell" the "printed page" how big the screen is). These rules also work inconsistently.

From my research during development and planning for 6.x there is not a foolproof or super consistent way for webpages to interact with the browser/os print dialog. The results are inconsistent across browsers regardless of the methods I experimented with.

So the decision made was that we would implement an imperfect solution with the hope that the browsers that don't support our solution will one day add support. This is a logical assumption since both Safari and Firefox support the @page rule but don't support size property. The assumption is that since they already support @page they might one day add support for the size prop.

So the breakdown for today:

Browser	Market Share	Supports Rule
Chrome	64.34%	:heavy_check_mark:
Safari	19.16%	:x:
Edge	4.05%	:heavy_check_mark:
FireFox	3.41%	:x:
Samsung	2.85%	:heavy_check_mark:
Opera	2.07%	:heavy_check_mark:

Total Support: 73.309%

Sources: Market Share Data, CSS Rule Data

Of course market share data might vary based on the demographic of the site's users. Maybe a photography site leans more towards a "creative" user base that is more inclined to use Apple with the default safari as opposed to a tax course that may lean more towards a "corporate" user base inclined to use Windows with Edge... So this is general data that may not apply depending on the situation.

Additionally, while it is ideal that the print dialog opens with all the correct sizing, a lot of this stuff is also configurable by person printing the page with a fairly easy-to-use interface. The fact that users can switch from portrait to landscape with the click of a button and size down the scale with a few clicks also was part of the decision-making process: users can easily print this despite the issue being described here. The scenario where a user is going to click "Print" see that it's in the wrong orientation and then print it anyway and be mad about it seems pretty unrealistic to me.

We're not ruling out that there might be a better solution but I didn't find one during initial development. There might be a better solution out there today. At this moment I'll leave this on you to digest and discuss with the user.

I'm going to leave this open as a possible future improvement and as a "known" issue in the aforementioned browsers.

gocodebox / lifterlms