微信小程序 CSS border-radius元素、overflow:hidden选择性失效问题 iPhone ios 苹果兼容问题

最新推荐文章于 2024-06-17 16:26:12 发布
最新推荐文章于 2024-06-17 16:26:12 发布
阅读量1.1k 收藏 1
点赞数 1
分类专栏： 小程序 文章标签： css 小程序
原文链接：https://blog.csdn.net/battercake/article/details/88868146
版权

问题原因：父级设置圆角属性失效 父元素使用border-radius和overflow:hidden做成圆形，子元素如果使用了transform属性，则父元素的border-radius、overflow:hidden会失效。
在这里插入图片描述
方法一：（父元素使用 -weibkit-mask-image 覆盖掉圆角部分。-webkit-mask-image 可以使用图片、Gradient 渐变或者 SVG mask 作为元素的 mask 遮罩。在 WebKit 的兼容性还算可以。

-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
-webkit-mask-image: -webkit-radial-gradient(white, black);

这两个css属性放到父级就可以了 ） 好麻烦

方法二：
-webkit-backface-visibility: hidden;-webkit-transform: translate3d(0, 0, 0);
ok 加上就搞定 如下图
在这里插入图片描述

粥粥_
关注
专栏目录
微信小程序 - 详解报错 “errno“:600001,“errMsg“:“request:fail -118:net::ERR_CONNECTION_TIMED_OUT“，小程序错误-118解决教程
高级前端工程师
08-12 5257
微信小程序，报错，网络请求，request，-118，真机调试报错，体验版小程序报错，真机运行测试时请求报错，服务器接口，后端地址，开发者工具运行到真机提示，防火墙都关了还是不行，接口没问题，服务器正常但就是运行报错，请求超时，小程序errno 600001，小程序request:fail -118:net::ERR_CONNECTION_TIMED_OUT，依旧不行，API接口全挂了，详细解决方案，网络错误，https，请求失败，开发没事发布到线上不行，证书过期，域名，真机调试接口错误怎么解决，token
微信小程序 - 真机调试调用接口报错{errno: 600001, errMsg: “request:fail -102:net::ERR_CONNECTION_REFUSED}，真机运行测试请求异常
最新发布
王佳斌
08-10 4593
微信小程序，真机，调试测试，运行报错，API接口，服务器接口都报错了，小程序报错errno: 600001，小程序报错request:fail -102:net::ERR_CONNECTION_REFUSED，真实手机打开接口全都失效了，微信小程序真机测试失败，微信小程序{errno: 600001, errMsg: "request:fail -102:net::ERR_CONNECTION_REFUSED"}，详细解决方法，https，服务器SSL证书，无法解决，服务器更换SSL证书，接口地址改了也不行
微信小程序之input 边框
weixin_48553717的博客
04-26 9210
系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 例如：第一章 Python 机器学习入门之pandas的使用 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录系列文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例
微信小程序IOS系统bug border-radius圆角 和 overflow:hidden 溢出隐藏 失效的问题
Youyzq的博客
11-23 3630
问题 父元素使用border-radius和overflow：hidden；子元素使用了transform属性，父元素的overflow：hidden；会失效。 或者子级元素是一个image图片格式的，overflow：hidden同样也会失效 解决方法                         父元素设置以下两个属性 -webkit-backface-visibilit
微信小程序开发overflow: hidden在ios环境不生效问题
chenzhezhong的博客
11-29 994
解决overflow: hidden在ios的兼容性问题
CSS Overflow Hidden在iPhone & Safari不起作用
热门推荐
不知不觉 | 笔记
04-08 1万+
overflow hidden在iPhone和Safari上不起作用！其他浏览器和手机都可以，唯独iPhone和Safari不行 方法一： 网上找到的一种方法，在body上添加下面的CSS： body { position:relative; overflow-y:hidden; } 方法一： 同样是在网上找到的方法，和第一种方法大同小异，在bod
CSS ios 父元素 border-radius元素 overflow:hidden失效问题 iPhone ios 苹果兼容问题
第二世界
03-08 678
在父元素上加上这段代码 -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); -webkit-mask-image: -webkit-radial-gradient(white
微信小程序 css圆角,微信小程序界面设计小程序中CSS3样式精通课程-边框-border-radius 圆角边框...
weixin_36116139的博客
08-04 1575
border-radius 圆角边框通用语法浏览器支持微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：https://edu.csdn.net/topic/huangjuhua 定义和用法border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。提示：该属性允许您为元素添加圆角边框！默认值： 0继承性： no版本： CSS3Jav...
微信小程序 ---- 组件应用和实际开发的DEMO
01-09
微信小程序是一种轻量级的应用开发平台，主要针对移动端，由腾讯公司推出，旨在提供便捷的、无需下载安装即可使用的线上服务。本主题聚焦于微信小程序的组件应用与实际开发，通过一系列DEMO来深入理解其核心功能和...
微信小程序uni-popup弹框内 使用overflow：scroll 失效
qq_42702425的博客
04-29 3381
项目场景： 开发微信小程序过程中，需要实现弹框设置最大高度，下图红框中内容可滚动查看； 问题描述 刚开始实现方法 给外层盒子设置最大高度 max-height: 600rpx;overflow:hidden; 滚动的盒子设置 overflow：scroll; 结果发现 overflow：scroll 失效了 查询文档得知，是因为 uni-popup最外层设置了默认值 @touchmove.stop.prevent=“clear”，禁止内部滑动，导致的滑动没有效果 解决方案： 给外层盒子 设置
解决 overflow:hidden 在IOS 上 失效的问题
业余前端的职业经历
09-09 3427
其实 业务上经常会出现 在浏览器弹出一个 提示框 让用户输入一些东西 但是把 如果后面的 元素还能滚动的话 就给人一种 很不爽的感觉 建议 弹窗出现的时候禁止 body 内容滚动 用户体验就更好了 body{ overflow:hidden; } 让弹窗出来 设置 body的样式 overflow:hidden 弹窗消失的时候 再让body { overflow:auto}; 这个我再 谷歌的模拟器上 挺好的 然后 使用微信自带的浏览器也是好端端的 但是测试那边 拿着收集自带的 和 一些其他
ios手机,overflow:hidden无效
weixin_43824675的博客
06-09 1078
给它的父级元素添加position:fixed body{ height: 100%; overflow: hidden; width: 100%; position: fixed; }
ios下overflow:hidden不生效
qq_37273844的博客
04-14 691
目前解决办法是给父级元素加上position:relative 或 position: fixed;
小程序-swiper + borderRadius + overflow失效问题（轮播图案例）
Cosalneo的博客
09-18 466
上面的写法对于安卓和模拟器来说是可以完美展示的，ios上展示就有问题了，圆角不生效。：由于不同内核导致的，ios内核只要子元素使用了。就会失效，而swiper的滑动效果正好使用了。这种情况下，遇到了第一个问题，圆角设置失败。：微信webview的渲染问题，至今未修复。：给container元素添加。
小程序部分ios的overflow:hidden失效
hanchengmei的博客
06-17 212
描述： box里面有个swiper, box设置圆角&overflow:hidden, ios xr里面的swiper超出并没有超出隐藏。
ios下overflow:hidden没生效
yht2015的博客
06-17 646
最近在项目遇到图片标签父元素设置圆角，用到overflow:hidden;ios系统得手机图片还是没有圆角效果。
ios overflow:hidden无效解决方案
qq_42532540的博客
01-25 2098
H5IOS系统下： 解决方法：父元素添加一下即可 -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0);
微信小程序 CSS border-radius元素 overflow:hidden失效问题 iPhone ios 苹果兼容问题
Battercake的博客
03-28 5912
同事找我解决一个问题 说安卓圆角没问题 苹果上失效了 我一看 其实就是没做兼容 上图给你们看看 有没有看出来 其实就是父级设置圆角属性失效 父元素使用border-radius和overflow:hidden做成圆形，子元素如果使用了transform属性，则父元素的overflow:hidden会失效。 我同事用css3动画给这些字体价格闪闪旋转的金边 这个好办 父元素使用 ...
ios overfllow: hidden失效和动效页面卡顿
sqitarn的博客
05-26 609
关于ios 长页面 overfllow-x: hidden失效以及动效页面卡顿解决 起初是做的一个长图添加动效，body中有transform左右移动会超过屏幕，安卓手机添加overfllow-x:hidden能解决，但是ios不支持，找到的解决方法是： html { height: 100%; width: 100%; overflow-x: hidden; } body { height: 100%; width: 100%; box-sizing: b
微信小程序css border-radius凹
09-08
你可以使用`border-radius`属性来创建圆角效果，而要创建凹陷效果，可以结合使用`box-shadow`属性。下面是一个示例代码： ```css .wxapp { width: 200px; height: 200px; background-color: #ffffff; border-radius: 50%; box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5); } ``` 这段代码将创建一个宽高为200px的方形元素，并将其圆角化为50%的半径，以实现圆形效果。然后，`box-shadow`属性的`inset`关键字用于指定阴影在边框内部显示，接着是具体的阴影偏移、模糊度和颜色。通过微调这些值，你可以更改凹陷效果的样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值