Swiper运用在苹果移动端的变暗bug修复

news/2024/7/20 22:36:03 标签: ios, 苹果, swiper, 移动, 全屏滑动

有时候我们在手机端制作全屏滑动的时候可以用到swiper这个插件,插件好用是好用,但是有的时候就会出现一些小bug,比如运用swipper之后苹果手机打开点击或者长按的时候就会变暗,这个时候我们需要用到一些属性控制他就可以使他不会变暗了,一下为css控制的代码:

* {
    outline: none;
    webkit-focus-ring-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

解释一下:

1、webkit-focus-ring-color是聚焦环颜色

 

2、-webkit-tap-highlight-color 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。

当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时,覆盖显示的高亮颜色。

该属性可以只设置透明度。如果未设置透明度,iOS Safari使用默认的透明度。当透明度设为0,则会禁用此属性;当透明度设为1,元素在点击时不可见。

3、-webkit-touch-callout 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。

当你触摸并按住触摸目标时候,禁止或显示系统默认菜单。在iOS上,当你触摸并按住触摸的目标,比如一个链接,Safari浏览器将显示链接有关的系统默认菜单。这个属性可以让你禁用系统默认菜单。


http://www.niftyadmin.cn/n/1466679.html

相关文章

AngularJS 模块

对于 HTML 应用程序&#xff0c;通常建议把所有的脚本都放置在 <body> 元素的最底部。 这会提高网页加载速度&#xff0c;因为 HTML 加载不受制于脚本加载。 在我们的多个 AngularJS 实例中&#xff0c;您将看到 AngularJS 库是在文档的 <head> 区域被加载。 在…

jQuery检测浏览器的语言,并做相应的操作

有时候需要判断浏览器所用的语言&#xff0c;在网上查找了一下&#xff0c;整理如下&#xff0c;大家可以参考使用&#xff1a; // 检测浏览器语言 var chk_userlanguage function() { /* get browser default lang */ if (navigator.userLanguage) { baseLang navigator…

解决音频在ios环境下播放会全屏的bug方法

网页设计在移动端的时候&#xff0c;会出现播放自动全屏的效果的&#xff0c;说实在这个问题还是蛮棘手的&#xff0c;以下为次bug的解决方法&#xff1a; <audio id"video" preload"none" class"hide video" width"0" height&quo…

前端写README.MD的最全Markdown使用帮助

# 最全Markdown使用帮助---------------------------撤销&#xff1a;Ctrl/Command Z重做&#xff1a;Ctrl/Command Y加粗&#xff1a;Ctrl/Command B斜体&#xff1a;Ctrl/Command I标题&#xff1a;Ctrl/Command Shift H无序列表&#xff1a;Ctrl/Command Shift U有序…

解决移动端视频层级最高的问题,修改video属性

在网页设计在移动端设计的时候有些box里面都是需要放置video的时候&#xff0c;video的时候的层级总是最高的&#xff0c;这个时候就是需要在video的基础上修改属性就可以了&#xff0c;具体的属性如下&#xff0c;大家可以参考参考&#xff1a; <video src"https://h…

移动swiper中动画卡顿,通过requestAnimationFrame写向下的动画

当手机网页使用swiper的时候&#xff0c;在css中写入动画的时候有些时候浏览页面会进行卡顿&#xff0c;这个时候你就需要手写动画了&#xff0c;以下为参考的一些的案例&#xff0c;大家可以用来参考 setT();var dataSet 0, dataStop 0.35, dataSetT 7;function setT(){$(…

解决Firefox中select选中时的虚线框问题

在前端页面需要下拉框的时候&#xff0c;不部分人还是会选择select情况的&#xff0c;不过还是可以自己手写一份&#xff0c;但是在select的时候要考虑到各种兼容问题&#xff0c;下面就是解决火狐浏览器select选中虚线的问题。 select:focus{outline: 0;border: 0; } 这种方…

jQuery上拉加载更多

注&#xff1a;请在移动端查看上拉&#xff0c; 下拉加载更多效果 前言&#xff1a; 由于&#xff0c;不管是在PC端&#xff0c;还是在移动端&#xff0c;上拉加载更多这个功能可以说是少不了的&#xff0c;尤其是在移动端。 在写这个上拉加载更多这个功能之前&#xff0c;我也…