White bar appearing at bottom of mobile – only on custom section

kronbergcollection · December 13, 2025, 12:41am

Hi everyone,

I’m currently working on a custom Shopify section (built with Custom Liquid, HTML, CSS and a bit of JS). (www.kronbergcollection.com)

Everything works as expected (layout, hotspots, popups, responsiveness), however I’m facing one issue that I’ve been stuck with for hours:

On mobile (especially iOS), a white bar appears at the bottom of the viewport, only when this specific section is present on the page.

Important details:

The white bar is not related to a popup or modal (it appears even when everything is closed).
It only happens on this custom section.
All other sections on the website behave correctly (the browser UI overlays transparently as expected).
When scrolling down, the page looks fine at first, but then the white bar appears once the section is in view.
Removing this section immediately removes the white bar.

Has anyone experienced something similar or knows what typically causes this behavior in custom sections on mobile Safari?

Any help would be highly appreciated
Thanks in advance!

___________________________________________________________________________________________

Code from the Section:

<section

id=“shopify-section-{{ section.id }}”

class=“ms-hotspot-section”

data-ms-hotspot

>

<img

src=“img”

alt=“”

class=“ms-hotspot-overlay-icon”

>

TAP THE MARKERS TO EXPLORE PERSONALIZATION OPTIONS

{% if section.settings.image != blank %}

<img

src=“{{ section.settings.image | image_url: width: 1600 }}”

alt=“”

class=“ms-hotspot-image”

>

{% endif %}

{% for block in section.blocks %}

<button

type=“button”

class=“ms-hotspot-dot”

data-hotspot-id=“{{ block.id }}”

style="

          top: {{ block.settings.top }}%;

          left: {{ block.settings.left }}%;

        "

aria-label=“{{ block.settings.title }}”

>

<img

src=“https://cdn.shopify.com/s/files/1/0925/3381/7721/files/Design_ohne_Titel_12.png?v=1765537820”

alt=“”

class=“ms-hotspot-icon”

>

{% if block.settings.popup_image != blank %}

<img

src=“{{ block.settings.popup_image | image_url: width: 900 }}”

class=“ms-hotspot-popup-image”

alt=“”

>

{% endif %}

{% endfor %}

{% if section.settings.eyebrow != blank %}

{% endif %}

{% if section.settings.heading != blank %}

{% endif %}

{% if section.settings.body_text != blank %}

{% endif %}

×

/\* ===== SECTION ===== \*/ .ms-hotspot-section { padding: 32px 0; } .ms-hotspot-section .page-width { padding-left: 16px; padding-right: 16px; } /\* ===== CARD ===== \*/ .ms-hotspot-card { display: grid; grid-template-columns: 1.2fr 1fr; border: 1px solid rgba(0,0,0,0.08); border-radius: 10px; overflow: hidden; background: #fff; } /\* ===== IMAGE ===== \*/ .ms-hotspot-media { position: relative; } .ms-hotspot-image { width: 100%; min-height: 320px; object-fit: cover; display: block; } /\* ===== OVERLAY INFO ===== \*/ .ms-hotspot-overlay-tag { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.95); padding: 4px 8px; border-radius: 6px; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; z-index: 3; } .ms-hotspot-overlay-icon { width: 12px; opacity: .7; } /\* ===== CONTENT ===== \*/ .ms-hotspot-content { padding: 22px; } .ms-hotspot-eyebrow { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; opacity: .6; } .ms-hotspot-heading { font-size: 22px; margin: 6px 0 10px; } .ms-hotspot-body { font-size: 13px; line-height: 1.6; opacity: .75; } /\* ===== HOTSPOTS ===== \*/ .ms-hotspot-dot { position: absolute; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 50%; border: none; background: transparent; padding: 0; cursor: pointer; z-index: 5; } /\* PNG ICON \*/ .ms-hotspot-icon { width: 100%; height: 100%; display: block; position: relative; z-index: 2; } /\* PULSE RING \*/ .ms-hotspot-pulse { position: absolute; inset: 0; border-radius: 50%; background: rgba(255,255,255,0.6); animation: msPulse 2.4s ease-out infinite; z-index: 1; } @keyframes msPulse { 0% { transform: scale(1); opacity: .7; } 70% { transform: scale(2); opacity: 0; } 100% { transform: scale(2); opacity: 0; } } /\* ===== POPUP ===== \*/ .ms-hotspot-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: none; align-items: center; justify-content: center; z-index: 9999; } .ms-hotspot-overlay.active { display: flex; } .ms-hotspot-popup { background: #fff; max-width: 520px; width: calc(100% - 32px); padding: 22px; border-radius: 12px; position: relative; } .ms-hotspot-close { position: absolute; top: 10px; right: 14px; font-size: 22px; background: none; border: none; cursor: pointer; } .ms-hotspot-popup-image { width: 100%; border-radius: 8px; margin-bottom: 12px; } /\* ===== MOBILE ===== \*/ @media (max-width: 900px) { .ms-hotspot-card { grid-template-columns: 1fr; } } : "text", "id": "heading", "label": "Heading" },

{ “type”: “richtext”, “id”: “body_text”, “label”: “Text” }

],

“blocks”: [

“type”: “hotspot”,

“name”: “Hotspot”,

“settings”: [

“type”: “range”,

“id”: “top”,

“label”: “Top position (%)”,

“min”: 0,

“max”: 100,

“step”: 1,

“default”: 50

    },

    {

“type”: “range”,

“id”: “left”,

“label”: “Left position (%)”,

“min”: 0,

“max”: 100,

“step”: 1,

“default”: 50

    },

    {

“type”: “text”,

“id”: “title”,

“label”: “Popup title”

    },

    {

“type”: “richtext”,

“id”: “text”,

“label”: “Popup text”

    },

    {

“type”: “image_picker”,

“id”: “popup_image”,

“label”: “Popup image”

    }

  \]

}

],

“presets”: [

{ "name": "Hotspot Card" }

]

}

{% endschema %}

Maximus3 · December 13, 2025, 1:13am

Lol I must have missed that you’re talking about the other screenshot. Disregard

tim_1 · December 13, 2025, 3:44am

The section is not visible on the published site, right?

Share a preview link to this unpublished theme/product so people can see the problem with their own eyes.

Also, use </> button when sharing code, otherwise the forum engine will eat some of it. As it did with your post…

There are several possible causes:

Some custom CSS code side-effects in other parts of the page;
An element which is invisible, but still consumes space on the page;
An error in HTML – some unclosed tag or wrong quotemark can do that too…

devcoders · December 13, 2025, 4:01am

Hi @Maximus3

Why the white bar appears on iOS Safari

One of these three issues is almost ALWAYS responsible:

A fixed-position element without height: 100% or inset: 0

You have:

.ms-hotspot-overlay {
  position: fixed;
  inset: 0;
  display: none;
}

This is correct — BUT inside .ms-hotspot-overlay.active Safari sometimes still calculates an extra layout height, especially if the parent <section> has padding or margins that interact with fixed elements.

Your section likely creates an accidental extra scroll height

This is the biggest reason.

In your section, this is suspicious:

.ms-hotspot-section {
  padding: 32px 0;
}

If ANY child element inside the section ends up having position: absolute; AND an image with min-height or %-based positioning, Safari sometimes adds phantom space below.

Especially absolute children like the hotspot dots:

.ms-hotspot-dot {
  position: absolute;
  transform: translate(-50%, -50%);
}

On iOS, when absolute elements exceed the image container, Safari artificially extends the page → white bar appears.

iOS Safari Bug: 100vh vs dynamic viewport

If anywhere in the CSS (your theme or your custom section) uses:

height: 100vh;
min-height: 100vh;

iOS reserves UI chrome → creates the white bar.

Your snippet does not show it, but it might exist in theme CSS.

THE FIXES (Apply these 3 and it will disappear)

Fix 1: Force the section to never extend beyond the visible page

Add this to your CSS:

.ms-hotspot-section {
  overflow: hidden;
}

This solves the issue in 90% of cases.

Fix 2: Add this iOS-specific fix to limit vertical expansion

Add:

html, body {
  max-height: 100%;
  overscroll-behavior-y: none;
}

Optional but recommended:

.ms-hotspot-section, 
.ms-hotspot-card {
  transform: translateZ(0);
}

This forces Safari to recalc height correctly.

Fix 3: Prevent fixed overlay from shifting viewport

.ms-hotspot-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

Best regards,
Devcoder

Topic		Replies	Views
White bar appearing at bottom of mobile viewport – only on custom section Store Design design , css , shopify-themes , troubleshooting	3	18	December 13, 2025
White bar showing up on top and sometimes bottom on Mobile dawn theme Store Design header , customizations , footer , css , shopify-themes , product-page	3	62	April 9, 2025
Why is there a white bar at the bottom of my mobile site? Store Design design , customizations , collection-page , footer , landing-page , css , shopify-themes , troubleshooting , html	4	25	December 8, 2023
Sense 15.3.0 – Custom Liquid section too tall on iPhone Safari (extra background below content). How to make height hug content? Store Design design , customizations , css , troubleshooting , shopify-theme	4	28	October 14, 2025
Refresh theme: White blank section underneath slide on Mobile View Store Design css , html	7	14	September 7, 2023

White bar appearing at bottom of mobile – only on custom section

Topic summary

{{ block.settings.title }}

{{ section.settings.heading }}

White bar appearing at bottom of mobile – only on custom section

Topic summary

{{ block.settings.title }}

{{ section.settings.heading }}

Related topics