Configuring Perspective Popup Transparency Correctly

The popup shows a rounded outer edge, but a square patch from the view or title still sticks through the corner. Changing the view root style, adding overflow rules, or rounding only the popup container does not remove it. Start here: treat the popup shell, header, and embedded view as separate rendered elements.

Stop applying the fixes that miss the visible layer

Several reasonable-looking changes fail because they target only one element in the popup structure.

• Changing only the view root: This rounds or clears the view content but does not change the outer popup shell or its header.
• Changing only .ia_popup: The container becomes transparent or rounded, while an internal child can retain its background and square corners.
• Setting overflow: That is not the fault. The child is painting inside its own rectangular box; it is not necessarily overflowing the popup's bounds.
• Applying a global popup rule: It changes every matching popup in the project when you may need the treatment on only one instance.
• Trying to bind a stylesheet rule to a session property: A rule in stylesheet.css or a custom theme is a loaded resource, not a session component property. You cannot directly bind its radius value to a session property.

Large radii also create a second problem: the curve can cover title text or the close icon. A radius such as 50px is useful while diagnosing layers, but it may be unsuitable for the final design.

Identify which popup layer remains square

A Perspective popup is not one paint surface. The outer popup, title/header, body, and view content can each contribute a background or corner. Transparency on the shell exposes whichever child still paints underneath it. Border radius on one element does not automatically clip or reshape its descendants.

In 8.1.40 Maker, one observed case showed the view contents rounding while the title did not when only .ia_popup had border-radius: 50px. Diagnose that presentation by inspecting the title layer; do not keep increasing the outer radius.

Choose the narrowest selector that fits the job

Use the popup ID passed when the popup opens. The rendered outer ID adds the popup- prefix. If the popup opens with the ID foo, target that single rendered instance with:

#popup-foo {
  background: transparent;
}

For a reusable convention, place a marker in popup IDs. An ID beginning with transparent, such as transparent_foo, can use a starts-with selector:

.ia_popup[id^=popup-transparent] {
  background: transparent;
}

This is the safer convention when the marker is always at the beginning. It documents intent and avoids matching an unrelated ID that merely contains the word.

Use a contains selector when IDs must combine independent style markers:

.ia_popup[id*=transparent] {
  background: transparent;
}

.ia_popup[id*=rounded] {
  border-radius: 15px;
}

An ID such as rounded_foo_transparent receives both rules. Contains matching is flexible, but naming discipline matters. Pick marker words that will not appear accidentally in ordinary popup IDs.

Apply the popup treatment in the right order

1. Open the affected popup and reproduce the exposed corner at the browser size where operators see it.
2. Open browser developer tools with F12 or Ctrl+Shift+I.
3. Select the square or opaque corner with the element inspector. Determine whether the visible surface belongs to .ia_popup, .ia_popup_header, .popup-body, or the embedded view.
4. Add temporary declarations in the Styles panel. Test transparency and radius on one layer at a time so the element producing the corner is obvious.
5. Confirm the runtime popup id. Decide whether the rule applies to one ID, a starts-with ID family, or popups containing a marker.
6. Copy the working declarations into the project's stylesheet.css resource or the applicable custom theme file.
7. Apply matching styles to any child that paints at the same corner. Do not stop after the outer shell looks correct in the inspector.
8. Reload the session resource, reopen the popup, and verify the persisted rule rather than the temporary browser edit.

Developer tools provide the fastest fault isolation because they show the actual rendered element and every rule acting on it. A change made only in the Styles panel disappears on reload; it is a test, not the completed repair.

Match the shell and body corner geometry

When the embedded content reaches the popup edges, use the same radius on the popup shell and its body. This removes the rectangular body color that appears through a rounded outer corner:

.ia_popup[id*=rounded] {
  border-radius: 15px;
}

.ia_popup[id*=rounded] .popup-body {
  border-radius: 15px;
}

The descendant selector limits the body rule to popups whose IDs contain rounded. It does not alter every .popup-body in the project.

If the view itself owns the visible background, apply equivalent corner styling to that view's root or its edge-to-edge container. The governing habit is simple: every opaque element that reaches a curved edge must use compatible geometry. Rounding the shell alone does not reshape the child's painted background.

Keep the units and values aligned. Mixing a percentage radius such as 25% on the shell with a fixed-pixel radius on the body can produce different curves as the popup changes size. Start with the same fixed value on adjacent layers, then adjust only after checking all popup dimensions used by the project.

Handle the header as a separate surface

The title area can remain square even after the popup shell and view are correct. Apply the top radii to .ia_popup_header:

.ia_popup_header {
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
}

.ia_popup {
  border-radius: 20px;
}

Those selectors are global. Scope them when only selected popups should change:

.ia_popup[id*=rounded] {
  border-radius: 20px;
}

.ia_popup[id*=rounded] .ia_popup_header {
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
}

Inspect the rendered hierarchy before relying on the scoped descendant form. The browser inspector decides whether the header is a descendant of the ID-bearing element in the active session.

After rounding the header, test its contents. The title and close control need clear space inside both top curves. If either is obscured, reduce the radius or revise the header layout; adding more transparency does not recover usable header area.

Verify scope, persistence, and operator behavior

• Target: Open the intended popup and confirm its shell, header, body, and view meet cleanly at every corner.
• Negative scope: Open a popup without the marker. It must retain its previous appearance.
• Combined markers: Open rounded_foo_transparent and confirm that both the transparent and rounded rules match.
• Persistence: Reload the client session and reopen the popup. A repair that existed only in developer tools will be gone.
• Header controls: Exercise the close control and inspect the title at the final radius.
• Size changes: Check every configured popup size and the browser dimensions used on the panel. Percentage radii change with the element dimensions.
• Background contrast: View the transparent popup over representative screen colors. A hidden square edge can reappear when the background changes.

If designers need a runtime-adjustable radius, bind component or view style properties to a custom session property where those properties are exposed. Keep that approach distinct from static CSS: the value inside stylesheet.css cannot be directly bound to the session property.

FAQ