From 105796f6bc8f961f58ecbb101285097cc86891c0 Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Wed, 2 Apr 2025 08:08:11 -0700
Subject: [PATCH] fix(segment-view): prevent vertical scroll while scrolling
 horizontally (#30276)

Issue number: resolves #30001

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

When segment view has content that is long enough to render outside of
the viewport, then a user can scroll vertically and horizontally when
the user scrolled down to see the content at the bottom. This causes
disorientation as scrolling should only be in one direction.

This only happens on a mobile device, specifically Android. It can be
reproduce with a browser simulator.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Updated styling to take into account that content might be outside of
the viewport.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev build: `8.5.2-dev.11743531350.19e040aa`
---
 .../components/segment-content/segment-content.scss | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/core/src/components/segment-content/segment-content.scss b/core/src/components/segment-content/segment-content.scss
index 464402b41f..38616a7d90 100644
--- a/core/src/components/segment-content/segment-content.scss
+++ b/core/src/components/segment-content/segment-content.scss
@@ -8,4 +8,17 @@
   flex-shrink: 0;
 
   width: 100%;
+
+  overflow-y: scroll;
+
+  /* Hide scrollbar in Firefox */
+  scrollbar-width: none;
+
+  /* Hide scrollbar in IE and Edge */
+  -ms-overflow-style: none;
+
+  /* Hide scrollbar in webkit */
+  &::-webkit-scrollbar {
+    display: none;
+  }
 }