项目中遇到的奇形怪状的问题，持续更新记录
2023-11-10 03:19:34
在项目开发过程中，总会遇到各种各样奇怪的问题，这些问题往往让人抓耳挠腮，百思不得其解。本文将对我在过往项目中遇到的奇形怪状的问题进行记录，希望能够帮助其他开发者避免踩坑。
PC端问题
问题 1：PC 端页面莫名其妙卡顿，排查半天发现是某些元素的 box-shadow 属性导致
解决方案：
将 box-shadow 属性的 spread 值从正值改为负值即可解决卡顿问题。
问题 2：PC 端某些页面会莫名其妙地闪屏，排查半天发现是某个组件的 z-index 属性设置太高导致
解决方案：
降低该组件的 z-index 属性值即可解决闪屏问题。
问题 3：PC 端某个页面在不同浏览器中渲染效果不一致，排查半天发现是某个元素的 transform 属性导致
解决方案：
为该元素添加 -webkit-transform 属性，与 transform 属性的值相同即可解决渲染不一致问题。
问题 4：PC 端某个页面在不同分辨率的屏幕上布局错乱，排查半天发现是某个元素的 width 属性设置成 100% 导致
解决方案：
将该元素的 width 属性改为 calc(100% - 20px) 之类的固定值即可解决布局错乱问题。
问题 5：PC 端某个页面在某个特定时间点会莫名其妙地崩溃，排查半天发现是某个第三方库的 bug 导致
解决方案：
升级或降级第三方库的版本即可解决崩溃问题。
移动端问题
问题 1：移动端页面在某些安卓机型上会出现白屏，排查半天发现是某个元素的 background-image 属性导致
解决方案：
将该元素的 background-image 属性值改为 url() 形式即可解决白屏问题。
问题 2：移动端页面在某些 iOS 机型上会出现闪屏，排查半天发现是某个组件的 overflow: hidden 属性导致
解决方案：
为该组件添加 -webkit-overflow-scrolling: touch 属性即可解决闪屏问题。
问题 3：移动端页面在某些机型上会出现卡顿，排查半天发现是某个元素的 transform 属性导致
解决方案：
为该元素添加 -webkit-transform 属性，与 transform 属性的值相同即可解决卡顿问题。
问题 4：移动端页面在某些机型上会出现布局错乱，排查半天发现是某个元素的 position 属性导致
解决方案：
将该元素的 position 属性改为 relative 或 absolute 即可解决布局错乱问题。
问题 5：移动端页面在某些机型上会出现崩溃，排查半天发现是某个第三方库的 bug 导致
解决方案：
升级或降级第三方库的版本即可解决崩溃问题。
跨平台问题
问题 1：PC 端和移动端页面在不同平台上的字体渲染效果不一致，排查半天发现是某个字体的 font-family 属性设置不正确导致
解决方案：
为该字体添加 font-family 属性，并指定多个字体名称，以确保在不同平台上都能正常渲染。
问题 2：PC 端和移动端页面在不同平台上的按钮样式不一致，排查半天发现是某个按钮的 border-radius 属性设置不正确导致
解决方案：
为该按钮添加 -webkit-border-radius 属性，与 border-radius 属性的值相同即可解决按钮样式不一致问题。
问题 3：PC 端和移动端页面在不同平台上的某些元素的事件响应不一致，排查半天发现是某个元素的 eventListener 添加不正确导致
解决方案：
为该元素添加 addEventListener 事件监听器，并指定正确的事件类型和处理函数即可解决事件响应不一致问题。
问题 4：PC 端和移动端页面在不同平台上的某些组件的动画效果不一致，排查半天发现是某个组件的 animation 属性设置不正确导致
解决方案：
为该组件添加 -webkit-animation 属性，与 animation 属性的值相同即可解决动画效果不一致问题。
问题 5：PC 端和移动端页面在不同平台上的某些第三方库的使用方式不一致，排查半天发现是某个第三方库的 API 在不同平台上有差异导致
解决方案：
根据不同平台的 API 差异，调整第三方库的使用方式即可解决问题。
总结
以上只是我在项目开发过程中遇到的部分奇形怪状的问题，还有很多其他的问题没有列出。在开发过程中，遇到问题是难免的，重要的是保持冷静，耐心排查，逐步解决问题。同时，养成记录问题的习惯也很重要，这可以帮助我们在以后的开发中避免踩同样的坑。
