Telegraaf.nl HPTO Clickability Issue -- July 2026

Status: Fixed (Nicolay, July 1) Deadline: July 4, 2026 (takeover campaign goes live) Priority: Urgent

The Problem

The skin (HPTO) ad on telegraaf.nl has areas that are not clickable -- specifically the sides and sometimes the top. The website's content container spans the full viewport width and overlays the skin sides, blocking click events.

Root Cause (Jens's Analysis)

The container piped-container_container__otfev page-layout_contentContainer__fxdkH spans the full page width. Even though it's visually transparent on the sides, it sits on top of the skin iframe and intercepts clicks. Removing this container in DevTools inspector restores clickability on the sides.

People Involved

Person	Role	Contact
Stijn van Manen	Client (IGM Network), reported the issue	stijnvanmanen@igmnetwork.com, +31 (0)6 28 53 18 51
Jens van Egmond	Cavai Graphic Designer, investigated	jens.vanegmond@cavai.com
Haakon Mydland	Cavai, normally handles skin fixes (on leave)	@mcsneaky
Nicolay	Covering for Haakon	nicolay@cavai.com, +47 91806160

Creative Group

• Workspace 686, Creative Group 55125
• URL: https://my.cavai.com/workspaces/686/creative-groups/55125/creatives

Preview Link

https://www.telegraaf.nl/?google_preview=nYQxZUyDCp0Y896O0gYw8_rD2QaIAYCAgJDZ_fWtEw&iu=75037320&gdfp_req=1&lineItemId=7336964377&creativeId=138562117980

(Mediahuis GAM tag)

Current Telegraaf Config

{
  "selector": "div[class*='header_topics'] > div",
  "zIndex": "295",
  "padding": "20",
  "additionaljs": "..." // see decoded version below
}

The existing additionaljs already does substantial DOM manipulation:

• Sets .skin-container-inner background to transparent
• Reads --content-width from a takeover-specific container
• Sets CSS custom property --content-width on the skin iframe

It also has a handleTop() function that:

• Calculates iframe height from #__next > .container
• Sets --visibleHeight, --topOffset, --scroll-pos custom properties
• Handles scroll events for parallax behavior
• Manages z-index for sticky header and nav elements

Fix Approach: pointer-events: none

Set pointer-events: none on the blocking container(s) and pointer-events: auto on their children, so page content remains interactive but the transparent overlay doesn't block skin clicks.

Attempt 1 (failed): querySelector -- single element

Commit 4cf5473 on delivery-3 main (July 1). Updated additionaljs with:

var blockingContainer = document.querySelector('[class*="piped-container_container"]');
if (blockingContainer) {
    blockingContainer.style.pointerEvents = 'none';
    // children get pointer-events: auto
}

Result: inline pointer-events: none visibly applied in DevTools, but sides still not clickable.

Why it failed: querySelector only targets the FIRST matching element. When the user originally tested in DevTools by editing the CSS rule .piped-container_container__otfev { pointer-events: none }, that rule applied to ALL elements matching the class. There may be multiple piped-containers, or the <main> element itself (which wraps everything) could also be blocking.

Attempt 2 (failed): pointer-events: none on container, auto on content child

Commit c2d83a1. Set pointer-events: none on the container and pointer-events: auto only on the content child (not leftPipe/rightPipe). Still didn't work because the content child (piped-container_content__InJV1) itself spans 1728px (full viewport) via grid-column: full-width.

Attempt 3 (success): pointer-events: none on both container AND content child

Commit 0bb704c. The fix:

// pointer-events: none on the container
blockingContainer.style.pointerEvents = 'none';
// pointer-events: none on the content child (also full-width)
contentChild.style.pointerEvents = 'none';
// pointer-events: auto on content's children (the actual page content)
for (var i = 0; i < contentChildren.length; i++) {
    contentChildren[i].style.pointerEvents = 'auto';
}

The DOM structure that matters:

piped-container_container  (full-width grid)     -> pointer-events: none
  piped-container_content  (grid-column: full-width, 1728px) -> pointer-events: none
    takeover-ad-content-container (actual content) -> pointer-events: auto
  piped-container_leftPipe   -> untouched (inherits none)
  piped-container_rightPipe  -> untouched (inherits none)

Key lessons

1. Setting pointer-events: none on a parent is not enough if a child also spans full width and has its own pointer-events context
2. Always use DevTools "Inspect Element" on the non-clickable area to find the ACTUAL element intercepting clicks
3. When testing in DevTools via CSS rules vs inline styles: CSS rules apply to ALL matching elements, inline styles only to the one you target

Decoded additionaljs

See additionalJs.js in this directory for the full decoded/readable version.

Timeline

• June 30: Stijn reports the issue to Jens
• June 30: Jens investigates, identifies the blocking container, asks Nicolay
• July 1: Nicolay takes over
• July 1: Attempt 1 (commit 4cf5473) -- pointer-events: none on container only. Failed.
• July 1: Attempt 2 (commit c2d83a1) -- also set auto on content child. Failed (content is also full-width).
• July 1: Attempt 3 (commit 0bb704c) -- pointer-events: none on both container and content, auto on content's children. Fixed!
• July 1: Notified Stijn and Jens that the issue is resolved