记录工作中遇到的目前无法解决疑难杂症

记录我工作中遇到的网上搜都搜不到的疑难杂症

1. 个别Mac电脑（目前只发现Mac，而且不区分型号），出现子级设置width: 100%;不能把父级的滚动条宽度计算在内。
2. 360极速浏览器下：一个定高的div设置flex-direction: column-reverse;导致不能上下滚动的问题，而设置能flex-direction: column就可以滚动。谷歌浏览器下正常

对于问题1

可能我还没有说清楚，问题就是有两个嵌套的DIV：

最奇葩的是，这个问题目前发现只跟电脑有关，只有个别Mac（包括14英寸，15.6英寸的）会出现这种情况,而且竟然跟浏览器没关系？！！只要发现这个电脑出现这种情况，那么这个电脑的所有浏览器都会出现这种情况！我对比了出现问题的电脑的浏览器以及正常电脑的浏览器（谷歌为例），在控制台打印navigator,结果显示版本号什么的都一样！如图

所以我根本找不到原因！无法进行判断！！

万般无奈之下我只能动用最后的杀手锏——JS了！对的，用JS粗暴的计算父级的offsetWidth（而不是clientWidth,它俩的区别就在这，后者是不包括滚动条宽度的），然后再给子级进行使用：

const ulwidth = this.deepBoxUpRef.current ? this.deepBoxUpRef.current.offsetWidth - 21 : 'width: calc(100% - 21px)'复制代码

<div ref={this.deepBoxUpRef}>
    <ul style={{ width: ulwidth }}>
</div>复制代码

PS：上面减去21px是因为需求要求隐藏滚动条，代码是为了描述问题精简化的，其实还进行了机型是否为Mac的判断，因为Mac和Windows滚动条的CSS逻辑是不一样的。你可能又要问了，为什么是21px？windows滚动条不是17px么？我最开始确实是设置的17px！但是后来测试频繁的提bug，会出现白边（滚动条漏出来了1px），然后我从17px调成19px再调成21px。然后基本解决了绝大部分情况（测试没再找我）。你可能注意到了，我为什么话没说死，而是说绝大部分？因为过了一个月，公司量化部门搬来他们的笨重的windows电脑过来，发现那该死的滚动条又把屁股漏出来了！(分辨率超级高，然后电脑显示器设置了放大150% 200%之类的，我试过设置成100%但还是那样，可能就是分辨率太高的原因？)崩溃！世界真是千奇百怪，滚动条宽度都从标准的17px到21px甚至更宽不等！其实后来我想到一个办法，就是再用JS计算父级的offsetWidth和clientWidth的差值就能把当前管它是什么浏览器的滚动条宽度计算出来了，但我还没有尝试过。ps中的ps：隐藏滚动条的问题真的是不太好解决，路过的大佬如果知道好方法请评论指点我呀！ps中的ps中的ps...：话说我写一个PS为什么写了这么多

如果你看了我上面写的那一大坨话，你肯定会好奇长什么样的：

对于问题2

这是一个PC端很少见的需求，那就是让网页的排列顺序从下至上，类似微信聊天对话框，每次都是从最下方出现并且不需要用户手动滚动。我尝试了很多办法最终选择flex-direction: column-reverse；但是后来发现只有谷歌/Safari浏览器完美支持。对此，我只找到一个帖子，一群老外在五年前就开始讨论这个问题，然而该问题至今未得到解决：

Content that overflows off the "start" side of a "flex-direction: *-reverse" flex container is not scrollable (but should be)

截取部分对话：

很有意思，大家有兴趣可以进去看看