mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-05 00:13:05 +00:00
fix(parse_block_v3): force stacking context on section element
The previous section_break implementation used CSS mask-image, which incidentally established a stacking context on the section. Replacing it with a gradient overlay div removed that side-effect — and broke the visual depth on every section with a gradient mesh or radial background. Without a stacking context, the section's negative-z-index descendants (home-section-bg at z:-1 carrying the radial gradient, and the gradient_mesh wrapper at z:-10 carrying the orbs) escaped the section and painted behind the page root, where they were occluded by the page body — flat dark hero, no glow, no orbs. Add `isolate` (isolation: isolate) to the section element. This is the no-visual-side-effect way to force a stacking context, restoring containment of the negative-z layers without affecting siblings or content.
This commit is contained in:
1 parent
f584ad1610
commit
d7a8fbb415
1 file changed
+8
-2
@@ -318,7 +318,10 @@
|
||||
{{/* Route to appropriate handler */}}
|
||||
{{ if $is_preact }}
|
||||
{{/* Render Preact block with styling wrapper */}}
|
||||
<section id="{{$hash_id}}" class="relative {{if $has_gradient_mesh}}overflow-hidden{{end}} hbb-section {{$widget_class}} {{if $bg.text_color_light}}dark{{else if (eq $bg.text_color_light false)}}light{{end}} {{with $css_classes}}{{.}}{{end}}" {{with $style}}style="{{. | safeCSS}}"{{end}}>
|
||||
{{/* `isolate` forces a stacking context on the section so the home-section-bg
|
||||
(z-index:-1) and gradient mesh (z-index:-10) layers stay contained — without
|
||||
it, negative-z descendants escape the section and paint behind the page root. */}}
|
||||
<section id="{{$hash_id}}" class="relative isolate {{if $has_gradient_mesh}}overflow-hidden{{end}} hbb-section {{$widget_class}} {{if $bg.text_color_light}}dark{{else if (eq $bg.text_color_light false)}}light{{end}} {{with $css_classes}}{{.}}{{end}}" {{with $style}}style="{{. | safeCSS}}"{{end}}>
|
||||
{{/* Gradient Mesh Background */}}
|
||||
{{ if $has_gradient_mesh }}{{ $gradient_mesh_html }}{{ end }}
|
||||
<div class="home-section-bg {{if $bg.image}} bg-image{{if ($bg.image.parallax | default true) }} parallax{{end}}{{end}}{{with $bg_css_classes}} {{.}}{{end}}" {{with $style_bg}}style="{{. | safeCSS}}"{{end}}>
|
||||
@@ -348,7 +351,10 @@
|
||||
{{ $widget_args := dict "wcPage" $page "wcBlock" $block "wcIdentifier" $hash_id }}
|
||||
|
||||
{{/* Render traditional block with wrapper */}}
|
||||
<section id="{{$hash_id}}" class="relative {{if $has_gradient_mesh}}overflow-hidden{{end}} hbb-section {{$widget_class}} {{if $bg.text_color_light}}dark{{else if (eq $bg.text_color_light false)}}light{{end}} {{with $css_classes}}{{.}}{{end}}" {{with $style}}style="{{. | safeCSS}}"{{end}}>
|
||||
{{/* `isolate` forces a stacking context on the section so the home-section-bg
|
||||
(z-index:-1) and gradient mesh (z-index:-10) layers stay contained — without
|
||||
it, negative-z descendants escape the section and paint behind the page root. */}}
|
||||
<section id="{{$hash_id}}" class="relative isolate {{if $has_gradient_mesh}}overflow-hidden{{end}} hbb-section {{$widget_class}} {{if $bg.text_color_light}}dark{{else if (eq $bg.text_color_light false)}}light{{end}} {{with $css_classes}}{{.}}{{end}}" {{with $style}}style="{{. | safeCSS}}"{{end}}>
|
||||
{{/* Gradient Mesh Background */}}
|
||||
{{ if $has_gradient_mesh }}{{ $gradient_mesh_html }}{{ end }}
|
||||
<div class="home-section-bg {{if $bg.image}} bg-image{{if ($bg.image.parallax | default true) }} parallax{{end}}{{end}}{{with $bg_css_classes}} {{.}}{{end}}" {{with $style_bg}}style="{{. | safeCSS}}"{{end}}>
|
||||
|
||||
Reference in new issue
Block a user