关于ios H5 出现点击内置元素半透明灰色闪屏的问题 的解决

最新推荐文章于 2021-09-11 15:38:02 发布
最新推荐文章于 2021-09-11 15:38:02 发布
阅读量813 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ks8380/article/details/85091851
版权 
body,html{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
[问题探讨]规避H5开发ios使用fixed造成的闪屏
tom_wong666
12-22 1402
问题： H5开发ios，给页面头部使用fixed出现闪屏现象； 分析： 使用fixed给头部定位，页面滚动时，ios中出现屏幕中被固定的头部页面在滚动过程中闪屏，在安卓中未发现此问题。可见fixed在iso中并不稳定。 解决： 头部用普通文档流替代fixed定位，滚动区域改为div内部滚动，如下图： ...
记一次移动端H5开发所遇到的问题与细节,以及ios兼容
想飞的猪的博客
09-14 4048
第一次弄移动端H5项目开发，虽然是简单的页面展示，但也遇到了很多细节问题与兼容问题，尤其是h5视频标签video, 一.移动端禁止缩放 兼容 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> 主要属性是user-sca...
解决ios端点击按钮闪烁问题（小tips）
01-04
在ios端，safari浏览器上触发click事件有300ms的延迟相应，为touch添加的样式会和click冲突而出现闪烁问题 在safari中触摸事件的相应顺序如下： touchstart --> touchmove --> touchend --> click(300ms) 此时可试用以下样式取消click事件的默认样式来消除页面闪烁问题 *{ -webkit-tap-highlight-color:rgba(0,0,0,0); } （值得一提的是，300ms的延迟主要是用于判断用户是否为双击操作） 总结 以上所述是小编给大家介绍的解决ios端点击按钮闪烁问题（小tips），希望
h5页面 ios 手机 上点击某个位置 页面会有灰色闪屏处理
gaoqiang1112的博客
05-24 775
在我们写vue的项目时候 一般我会在 html body 和#app上添加 height：100% 主要是为了撑开页面 有时是为了添加背景色 但是 当你写一个页面的时候 如果你这个页面也写了height:100%的话 而你的页面内容 高度和 超过了所谓的100% 也就是你手机的屏幕的高度 此时你如果你向下滑动 点击 多出来的那部分 就会出发 标题 即 ios 灰色闪屏 其实就是你...
解决移动端iPhone设备点击时出现半透明的灰色背景
username_xu的博客
03-26 8294
、问题：在iPhone设备上点击时会出现一个半透明的灰色背景。解决办法：html,body{ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }-webkit-tap-highlight-color 是 css3 的新属性，这个属性只用于 IOS(iPhone和iPad)。当你点击一个链接或通过 Javascript 定义的可点击元素的时候，它...
H5页面（八）常见的问题二------填坑
斗师——Ace
06-09 2068
添加小程序，兑换各种视频教程/数据资源。 1. 添加到主屏后的标题（IOS） <meta name="apple-mobile-web-app-title" content="标题"> 2. 启用 WebApp 全屏模式（IOS） 当网站添加到主屏幕后再点击进行启动时，可隐藏地址栏（从浏览器跳转或输入链接进入并没有此效果） <meta name="app...
常见的移动端H5页面开发遇到的坑和解决办法
qq_35859392的博客
04-17 963
转过来，平时看看。虽然还有很多问题至今无解。比如：华为麒麟950的P8和meta打开我们的应用首页经常偶发白屏。！！ 1、安卓浏览器看背景图片，有些设备会模糊。 用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？ 经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的9...
H5开发：常见H5开发兼容问题
Generon的博客
05-25 8636
1、安卓浏览器看背景图片，有些设备会模糊。 用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？ 经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的960640分辨率，在网页里只显示了480320，这样devicePixelRatio＝2。现在android比较乱，有1.5的，有2的也
总结40条常见的移动端Web页面问题及解决方案
weixin_36106791的博客
08-17 603
前言 工作中接手做过一些移动端的项目，在开发过程中，发现了一些问题，结合网友的一些经验总结，整理下移动端常见的问题，这是在前一篇基础上，整理网友的经验，希望对大家有用。 1.安卓浏览器看背景图片，有些设备会模糊。 用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？ 经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把 iPhone 4的960640分辨率，在网页里只显示了480320，这样devicePixelRat
倾力总结40条常见的移动端Web页面问题解决方案
weixin_34109408的博客
05-30 3462
原文链接：http://mp.weixin.qq.com/s?__biz=MzAwNjI5MTYyMw==&mid=2651493053&idx=1&sn=8409bc267cd73229425a915f27f6a27f&scene=0#wechat_redirect 1.安卓浏览器看背景图片，有些设备会模糊。 用同等比例的图片在PC机上很清楚，但是手机上很...
手机端点击按钮阴影 ios输入框阴影解决方法
baozisss的博客
04-18 544
ios输入框阴影 input{ 　　-webkit-appearance: none; } 点击按钮 阴影 a,button,input { 　　-webkit-tap-highlight-color: transparent; 　　-moz-tap-highlight-color:transparent; 　　outline: 0; } ...
H5页面图片闪烁问题
weixin_43639981的博客
07-05 1794
wide使用记录-H5图片处理
那些年踩过的坑——h5页面在ios端点击高亮闪烁
weixin_34146805的博客
01-15 858
记得那是第一次独自完成一个项目，现在看来，那个项目会很简单的，但那个时候还是挺有成就感的。 当时碰到过一个问题，h5页面在ios端点击的时候，整个页面会高亮的闪烁一下,特别明显，被测试狂崔。。。最后发现是 css样式的问题 加一行就好了 { -webkit-tap-highlight-color: transpare...
【H5】移动端 点击闪烁 解决方案
Pany的博客
11-29 6766
H5页面在移动端触发点击事件的时候，被点击的元素会出现背景变黑，闪烁问题，体验非常差！解决方法如下：在被点击的元素设置css：-webkit-tap-highlight-color:transparent;
移动端网站或APP点击后出现闪动或灰色背景
weixin_30279315的博客
08-14 394
隐藏文本框阴影 input, textarea{-webkit-appearance: @none;} 取消手机点击屏幕时，会出现的灰块 html,body{-webkit-text-size-adjust: 100%;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);} 　 移动端网站或APP点击后出现闪动或灰色背景 只需对...
在vue项目中 使用swiper轮播图的关于 在ios中图片白边闪屏踩坑记录
weixin_44514665的博客
01-14 2954
场景描述： 近日，接到一个需求，改善APP首页的布局，需要在顶部添加一个可滚动的栏目导航，以切换栏目然后切换栏目内容类似于唯品会目前的切换效果。如下图 问题描述： 在切换顶部栏目的时候，下面内容页的banner图片会出现短暂的白边闪屏。在android中并没有什么问题，在ios中，在左右切换栏目页的时候，顶部的轮播图会有一瞬间的图片闪屏白边。 原因分析： 思考原因可能是因为我没有对整...
关于在移动端使用swiper插件，在苹果手机切换闪屏的问题
No_03的博客
09-11 971
.swiper-slide { transform: translate3d(0, 0, 0); } 添加了这一行代码解决了一部分问题，还有一些页面还是会闪屏
H5使用Swiper过程中遇到的滑动冲突
weixin_34203426的博客
06-13 4062
一、问题 （1）PC端可以鼠标可以拖动中间的轮子让页面上下滑动，点击左键按着也是拖不动 （2）手机端浏览H5手指不能滑动页面，导致很多页面下面的文字看不到 二、解决问题 1.下面分先说css的问题，主要排查overflow：hidden； 检查也有一定的顺序，检查超出高度的标签是否用了overflow：hidden；最好先检查html或body是不是加了height：100%；overf...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值