Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Badges: switch to transform-based print centering — fixes Firefox physical printer shift

Browse Source
This commit is contained in:
Scott Idem
2026-03-12 18:08:27 -04:00
parent bc23e8a399
commit 5410bb4a8c
2 changed files with 54 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/routes/events/[event_id]/(badges)/badges/[badge_id]/print/+page.svelte
View File

@@ -162,13 +162,10 @@
<style>
@media print {
/* Full-page reset.
app.css sets `overflow: hidden` on html + body globally. In print,
with display:contents dissolving the intermediate wrappers, body's
only remaining content is the badge (~3.5in wide). overflow:hidden
makes body a BFC that shrinks-to-content — producing a body box that
is badge-width instead of page-width. Overriding with overflow:visible
restores normal block sizing: body fills 100% of the page width. */
app.css sets `overflow: hidden` on html + body globally — override it
so body/html fill the full page (not just the badge width). */
html, body {
display: block !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
@@ -176,30 +173,27 @@
overflow: visible !important;
}
/* Body is the sole centering flex container.
.event_badge_wrapper is its only non-hidden flex child
once the intermediate wrappers are collapsed via display:contents. */
body {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Hide app chrome */
.submenu { display: none !important; }
/* Dissolve layout wrappers so .event_badge_wrapper bubbles up to a real
centering flex container.
/* #ae_main_content becomes the positioning context for the badge.
It fills the full page (100%×100%), and the badge is absolutely
centered within it.
#ae_main_content has overflow:auto — per CSS spec, display:contents
cannot override an element that establishes overflow clipping; Firefox
(spec-compliant) keeps it as a block container, breaking centering.
Fix: reset it as an explicit 100%×100% pass-through flex container
instead. Chrome applies this too (belt-and-suspenders). */
Why not flex: Firefox respects the printer driver's minimum hardware
margins even with @page { margin: 0 }. This makes the available
content area slightly smaller than 100%, throwing off flex centering.
CSS transform-based centering (translate -50%,-50%) is immune to
this: it centers relative to the containing block dimension, which
Firefox computes correctly even when printer margins are applied.
Why not display:contents on this element: #ae_main_content has
overflow:auto. Per spec, display:contents cannot override an element
with overflow clipping; Firefox keeps it as a block box. We reset it
to a positioned block instead. */
#ae_main_content {
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
display: block !important;
width: 100% !important;
max-width: none !important;
height: 100% !important;
@@ -211,17 +205,20 @@
}
/* .main_content and #badge_render_area have no overflow constraints,
so display:contents works on all browsers — they dissolve their boxes
and .event_badge_wrapper becomes a direct flex child of #ae_main_content. */
so display:contents dissolves their boxes in all browsers.
.event_badge_wrapper emerges as a direct child of #ae_main_content. */
.main_content,
#badge_render_area {
display: contents !important;
}
/* Badge wrapper: reset screen-only mx-auto; the @page size = badge size
so margin: 0 fills the page exactly.
gap/padding are stripped to eliminate any whitespace bleed. */
/* Center the badge using CSS transforms — the most reliable cross-browser
print centering method; unaffected by printer margin variations. */
.event_badge_wrapper {
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
margin: 0 !important;
padding: 0 !important;
gap: 0 !important;
@@ -245,8 +242,7 @@
outline: 4px solid blue !important;
outline-offset: -4px !important;
}
/* Red = #ae_main_content — now a real flex container (full width/height).
Should be VISIBLE and same size as body. */
/* Red = #ae_main_content — should be VISIBLE and fill the page (same as blue). */
#ae_main_content {
outline: 3px dashed red !important;
outline-offset: -6px !important;
@@ -260,7 +256,7 @@
outline: 3px dashed purple !important;
outline-offset: -12px !important;
}
/* Cyan = the actual badge — should be centered inside the red box */
/* Cyan = the actual badge — should be dead-center */
.event_badge_wrapper {
outline: 3px solid cyan !important;
outline-offset: 2px !important;

39
tests/badge_print_layout.test.ts
View File

@@ -177,33 +177,44 @@ test.describe('Badge Print Page — print layout centering', () => {
).toBeLessThan(5);
});
test('#ae_main_content does not clip in print mode', async ({ page }) => {
// Verifies that overflow:visible is applied (the Firefox fix).
test('#ae_main_content is a full-page positioned block in print mode', async ({ page }) => {
// Verifies overflow:visible (overflow:auto fix) and position:relative (centering context).
await page.goto(`/events/${event_id}/badges/${badge_id}/print`);
await page.waitForLoadState('domcontentloaded');
await page.emulateMedia({ media: 'print' });
const overflow = await page.evaluate(() => {
const styles = await page.evaluate(() => {
const el = document.getElementById('ae_main_content');
return el ? getComputedStyle(el).overflow : null;
if (!el) return null;
const cs = getComputedStyle(el);
return { overflow: cs.overflow, position: cs.position };
});
expect(overflow, '#ae_main_content overflow should be visible in print').toBe('visible');
expect(styles, '#ae_main_content must exist').not.toBeNull();
expect(styles!.overflow, '#ae_main_content overflow should be visible in print').toBe('visible');
expect(styles!.position, '#ae_main_content should be positioned (relative) in print').toBe('relative');
});
test('body is a flex container spanning full viewport width in print mode', async ({ page }) => {
test('badge wrapper is absolutely positioned and centered in print mode', async ({ page }) => {
await page.setViewportSize({ width: 816, height: 1056 });
await page.goto(`/events/${event_id}/badges/${badge_id}/print`);
await page.waitForLoadState('domcontentloaded');
await page.evaluate(inject_idb, [mock_badge, mock_template] as any);
await page.waitForSelector('.event_badge_wrapper', { timeout: 8000 });
await page.emulateMedia({ media: 'print' });
const result = await page.evaluate(() => ({
display: getComputedStyle(document.body).display,
width: document.body.offsetWidth,
}));
expect(result.display, 'body should be flex in print').toBe('flex');
// Body width must be close to the viewport width (no shrink-to-content)
expect(result.width, 'body should span full viewport width').toBeGreaterThanOrEqual(810);
const styles = await page.evaluate(() => {
const el = document.querySelector('.event_badge_wrapper') as HTMLElement | null;
if (!el) return null;
const cs = getComputedStyle(el);
return {
position: cs.position,
transform: cs.transform,
};
});
expect(styles).not.toBeNull();
expect(styles!.position, 'badge wrapper should be absolutely positioned').toBe('absolute');
// transform should contain a matrix (translate is set)
expect(styles!.transform, 'badge wrapper should have a transform applied').not.toBe('none');
});
});