android - android设备上的html css故障

Question

我正在使用 drupal 8 开发一个网站，我已经完成了一个带有图像和项目符号的轮播滑块。我在 Google Chrome 浏览器上运行 android 5,6 和 n 的设备 android 设备上有一个奇怪的故障。查看图像和生成此故障的 html/css。也许你能告诉我这个角色是怎么称呼的，那么我将能够在互联网上找到一个解决方案。

提前致谢。

HTML：

 <div class="views-field-title">
        <div class="views-content-title">
            <div class="bullet">
                <div class="bullet-active">
                </div>
            </div>
        </div>
    </div>

萨斯：

.views_slideshow_pager_field_item{
  width : 20px;
  height: 20px;
  display : block;
  float: left;
  margin : 10px;

  .views-field-title{
      //slider bullet
      .views-content-title{
        position: absolute;

        .bullet{
          color : blue;
          width : 16px;
          height: 16px;
          display : block;
          float: left;
          background : white;
          border-radius : 8px;
          box-shadow: 0px 0px 25px 0px rgba(black,0.6);
        }
      }
    }
    &.active{
      .views-field-title{
      //slider bullet
      .views-content-title{
        position: absolute;

        .bullet{
          //background : orange;
          .bullet-active{
            margin : 2px;
            width : 12px;
            height: 12px;
            border-radius : 6px;
            background : color(grey,3);
          }
        }
      }
    }
  }
}