看似 bug 又非 bug 的一个 bug

最近的一个项目中,对于 CSS 的一些属性一些选择符可以大胆使用,然后很意外得撞上一个 iOS 中 Safari 的一个解析问题。

复制代码
<Component style={{height: "calc(100vh - 46px)"}}>一个组件</Component>

这样的一段代码很简单,然而就是这样的一段简单的代码,在 iOS 中出现了让误以为不兼容 [style*='100vh - 46px'] 这个写法。

为什么说是误以为呢,因为当时有一个需要是要在移动端中去改变这个组件的高度,所以,我就想着,为什么不用属性选择符来快速实现呢,这样还可以不用去考虑写类名。于是我就写了这么一句 CSS。

复制代码
[style*='100vh - 46px'] {
  height: calc(100vh - 100px) !important;
}

在 Chrome 里模拟移动端看看,嗯,很 OK 么,高度改变了。

然而也就只是高兴了一下,就在 iOS 中发现高度并没有改变。十分好奇,通过数据线接上手机,打开 Safari,进入开发者菜单找到 iPhone 选项,开始调试 iPhone 上的打开的这个页面。

⇧⌘C,开始选择元素,然后在 iPhone 上点一下那个组件元素,快速定位到对应的元素上。然后在 DOM 中发现了一个很神奇现象。原本应该是 100vh - 46px 的属性值,变成了 -46px + 100vh 了。所以也就是为什么我的 CSS 没有作用的原因了。

就因为这个原因,我刚开始都怀疑是不是 *= 这个属性选择符的规则还存在兼容问题,或者是中间的 - 减号需要转义之类的。没想到啊没想到,居然还会有这样的一个情况出现。

最后为了考虑两者兼容,于是只好暂时委曲求全一下,写成这样了。

复制代码
[style*='100vh - 46px'],
[style*='-46px + 100vh'] {
  height: calc(100vh - 100px) !important;
}

现在想想啊,还不如直接写一个 className 来的实在,何必折腾呢。但不折腾一下,自己也不知道居然还会有这样一个情况存在。

技术前沿拓展

前端开发,你的认知不能仅局限于技术内,需要发散思维了解技术圈的前沿知识。细心的人会发现,开发内部工具的过程中,大量的页面、场景、组件等在不断重复,这种重复造轮子的工作,浪费工程师的大量时间。

介绍一款程序员都应该知道的软件JNPF,很多人都尝试用过它,它是功能的集大成者,任何信息化系统都可以基于它开发出来。

这是一个基于 Java Boot/.Net Core 构建的简单、跨平台快速开发框架。前后端封装了上千个常用类,方便扩展;集成了代码生成器,支持前后端业务代码生成,实现快速开发,提升工作效率;框架集成了表单、报表、图表、大屏等各种常用的 Demo 方便直接使用;后端框架支持 Vue2、Vue3。如果你有闲暇时间,可以做个知识拓展。

看完本文如果觉得有用,记得点个赞支持,收藏起来说不定哪天就用上啦~

相关推荐
爱写代码的派大星6 小时前
bug 就像隐藏在暗处的小怪兽
bug
燕双嘤6 小时前
Bug:引入Feign后触发了2次、4次ContextRefreshedEvent
bug
向上的车轮10 小时前
软件世界中的超级bug有哪些?
bug
测试小小怪下士2 天前
Bug的严重等级和优先级别与分类
bug
测试小小怪下士2 天前
软件Bug和缺陷的区别是什么?
bug
Matrix704 天前
Spark_写ORALCE:ORA-01426 numeric overflow 问题解决
bug
明耀6 天前
WPF Gif图谱 如果隐藏的话会存在BUG
c#·bug·wpf
|Ringleader|7 天前
【Unity Bug 随记】unity version control 报 xx is not in a workspace.
unity·bug·版本管理·uvc
a1111111111ss7 天前
猫狗识别之BUG汇总
bug
晓同哇哇~7 天前
Wxml2Canvas小程序将dom转为图片,bug总结
bug·canva可画