Known Issue: Print dialog issues in Safari and Firefox

[nrherron92]

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

System Report

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: [email protected]
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
-------------------------------------------

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

[thomasplevy]

@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.