Bootstrap 5移动端SVG Blob超出屏幕致横向滚动问题求助

问题根源 #

绝对定位元素不会遵循静态定位父容器的overflow规则，且你的Blob容器未被正确约束在父元素内，同时SVG自身的宽度设置也加剧了横向溢出。

修复步骤 #

1. 给页面根元素添加横向溢出隐藏
   先确保整个页面不会出现横向滚动，在全局CSS中添加：

   html, body {
     overflow-x: hidden;
     width: 100%;
     position: relative;
   }
   

2. 约束Blob的直接父容器
   找到包含.cssloco的col-md-6容器，给它添加相对定位和横向溢出隐藏，让绝对定位的Blob被限制在该容器内：

   .blob-container {
     position: relative;
     overflow-x: hidden;
   }
   

   然后给父div加上这个类：

   <div class="d-flex col col-md-6 order-1 order-sm-1 justify-content-center blob-container">
     <!-- Blob和图片内容 -->
   </div>
   

3. 修正Blob的CSS设置
   移除移动端.cssloco中的overflow: hidden（对绝对定位元素无效），调整定位参数确保Blob部分在容器内：

   @media (max-width: 1200px) {
     .cssloco {
       left: 40%;
       top: 150%;
       height: 600px;
       width: 600px;
     }
   }
   

4. 优化SVG的尺寸设置
   你的SVG设置了width: 150%，在移动端调整为width: 100%避免不必要的溢出：

   @media (max-width: 1200px) {
     #blobSvg {
       width: 100%;
     }
   }
   

完整修正后的代码示例 #

CSS部分

html, body {
  overflow-x: hidden;
  width: 100%;
  position: relative;
}

.cssloco {
  position: absolute;
  opacity: 1;
  left: 10%;
  top: 40%;
  z-index: -1;
  height: 100%;
  width: 200%;
}

@media (max-width: 1200px) {
  .cssloco {
    left: 40%;
    top: 150%;
    height: 600px;
    width: 600px;
  }
  
  #blobSvg {
    width: 100%;
  }
}

.blob-container {
  position: relative;
  overflow-x: hidden;
}

HTML部分

<div class="d-flex container mt-15 justify-content-between">
  <div class="row">
    <div class="col-8 col-md-6 col-sm-8 order-0 order-lg-0 order-sm-0 animacion mensaje-responsive">
      <h1 class="text-start fw-bold">Estás a un mensaje de distancia.</h1>
      <p class="fs-5 fw-semibold">Olvidate de volver a entrar a varios sitios web para conseguir información. <span class="fw-bold">Aerobot</span> te proporciona la forma de tener todo en un mismo lugar, haciendo que tu operación sea <span class="fw-bold">más rápida y más segura, 100% gratis. ✈️ </span></p>
    </div>

    <div class="d-flex col col-md-6 order-1 order-sm-1 justify-content-center blob-container">
      <div class="svg-blob cssloco">
        <svg viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="150%" id="blobSvg">
          <g transform="translate(151.32916831970215, 3.4678802490234375)">
            <defs>
              <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" style="stop-color: rgb(76, 161, 175);"></stop>
                <stop offset="100%" style="stop-color: rgb(196, 224, 229);"></stop>
              </linearGradient>
            </defs>
            <path class="blob" d="M479.79863,286.0103Q472.04119,322.0206,452.55149,352.53089Q433.06179,383.04119,405.37643,404.81464Q377.69107,426.5881,351.37643,453.89702Q325.06179,481.20595,287.53089,468.08238Q250,454.95881,217.0103,453.44851Q184.0206,451.93821,151.9794,441.03089Q119.93821,430.12357,88.91762,409.59268Q57.89702,389.06179,52.17506,352.45881Q46.45309,315.85583,25.64417,282.92792Q4.83524,250,12.26316,212.44851Q19.69107,174.89702,53.56179,153.61327Q87.4325,132.32952,103.80893,101.78833Q120.18536,71.24714,149.05149,49.4897Q177.91762,27.73226,213.95881,30.73226Q250,33.73226,285.07208,34.14988Q320.14417,34.5675,351.69565,50.60869Q383.24714,66.64988,407.42792,92.46911Q431.60869,118.28833,436.97483,152.74714Q442.34096,187.20595,464.94851,218.60298Q487.55607,250,479.79863,286.0103Z" fill="url(#gradient)"></path>
          </g>
        </svg>
      </div>
      <img src="svg/chat1.svg" alt="" class="imagen-reporte animacion">
    </div>
  </div>
</div>

关键原理 #

• 绝对定位元素的溢出只会被相对/绝对定位的父容器的overflow属性约束，静态定位容器无法限制绝对子元素。
• 给html和body添加overflow-x: hidden可以兜底防止页面级横向滚动。
• 调整SVG的宽度避免不必要的尺寸溢出，确保Blob在移动端只显示容器内的部分。

内容的提问来源于stack exchange，提问作者Federico Perez Diduch