Web应用按钮在Android正常显示但iOS端Safari/Chrome均不显示求助

• 固定定位缺少偏移属性，且水平居中写法无效
  你给按钮设置了position: fixed脱离了正常文档流，此时margin: 0 auto的水平居中规则完全不生效，同时你没有设置top/left/right/bottom任何偏移值，不同浏览器对无偏移固定定位元素的默认渲染逻辑不同：Android浏览器默认将元素放在文档流原位置的可视区域内，iOS Safari/Chrome则可能将元素渲染到视口之外，导致看不见。
  修复方式：手动指定固定定位的偏移值，比如要放在顶部居中可以写：

.button {
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  /* 删除原来的margin: 0 auto配置 */
}

• 层级低于canvas被遮挡
  你页面内存在全屏的摄像头canvas元素，按钮没有显式设置z-index属性，iOS浏览器的元素堆叠顺序渲染规则和Android不同，默认把canvas堆叠在按钮上方，直接挡住了按钮。
  修复方式：给按钮添加足够高的层级：

.button {
  z-index: 999;
}

• 缺少viewport元标签导致视口错位
  如果你的页面没有添加适配移动端的viewport元标签，iOS浏览器会默认以980px宽度渲染页面，缩放后按钮可能被挤出可视区域。
  修复方式：在head标签内添加viewport配置：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• iOS默认按钮样式重置问题
  部分iOS版本的Safari会对原生button元素添加默认的外观样式，可能覆盖你设置的背景色等属性，导致按钮和背景融为一体看不见。
  修复方式：给按钮添加取消默认外观的属性：

.button {
  -webkit-appearance: none;
  appearance: none;
}

内容的提问来源于stack exchange，提问作者user15635022