微信小程序从入坑到放弃之坑八：textarea在苹果手机中的大Bug

首次在这里写点东西，还请各位大佬担待点。

摘要：
昨天的placeholder-class只是希望各位看官注意，而今天的textarea就绝对是一个超级大坑！而且如果看官手中没有苹果手机测试的话，这个可就真的是个坑了！为啥？难道要等到用户向你反馈你们产品有bug？？？......
上一篇的《微信小程序从入坑到放弃之坑七：input组件的占位符placeholder》，没啥大坑，而这篇的textarea可就不一样了！这绝对是一个超大的Bug！！！

在上一节的设计稿中，详细地址那块儿就是一个textarea组件。如图：

其他无关的就不说了，我们直接进入正题。

一、textarea在模拟器、安卓和苹果中的效果

为了便于观察textarea组件的尺寸范围，我们给textarea设置一个背景色。如图：
（textarea在模拟器和安卓及苹果手机上的效果textarea在模拟器和安卓及苹果手机上的效果）

看到区别了吗？如果没有，再来张大图。如图：
（textarea在苹果手机上距离顶部有空隙textarea在苹果手机上距离顶部有空隙）

二、不就是个padding吗？！

对于有前端基础的看官来说，一眼就知道这是什么原因。是的，按照正常逻辑，这个空隙就是由padding引起的。

2.1、wxml代码

代码写完了，我们再用苹果手机看下效果。如图：
（微信小程序里的textarea设置padding为0时在苹果手机中没有生效）
微信小程序里的textarea设置padding为0时在苹果手机中没有生效可以看到，此时这个padding:0在苹果手机上并没有生效！

奇了怪了，难道textarea不支持padding吗？于是，我又将padding的值修改成40px，此时在安卓手机上的效果如下：
（设置padding为40时在苹果手机中也有效）
咦，怎么又有效果了？！

那这个苹果手机到底支持不支持微信小程序里的textarea组件的padding属性呢？要说不支持吧，修改成40时也有效，要说支持吧，改成0又无效！这就有点坑爹了！

三、微信小程序里的textarea确实有bug

为了便于测试，这回我们直接测一组吧。效果如图：
（测试发现在微信小程序中，苹果手机对padding的值有临界点）

看到了吗？当值小于或等于0时，在苹果手机中压根就没有任何反应！虽然正常的网页中padding的值是不能为负的！但此时连0!important都无能为力！！！

四、此坑有什么影响

可能有些看官还不知道这坑有什么影响，拿我们的设计稿来说。我们写的页面总得与设计稿一致吧！那些现在问题就来了，这个textarea组件在安卓和苹果上的表现都不一样，要想在两种手机上展现效果一样，必须得对苹果单独处理才行！否则，我们在安卓上布局是好的，到了苹果手机上面，就已经错位了！所以，这就是个超级大坑！要不是因为艺灵我用二手的iphone 6s测试，这个bug估计还不知道什么时候才能知道呢！如果是等到用户反馈才知道，这可是件多么坑爹的事情！！！

五、微信小程序中textarea内边距的坑通吃iphone各版本

看官可能会说：“都什么年代了，艺灵你还用个破6s来测试！”

行，为了验证此bug并非只是iphone 6s才有，于是我又召唤了我的小伙伴们。聊天如图：
（微信小程序中textarea的内边距bug在iphone各版本上都存在）

这回就问你服不服，iphone X，壕不？X都阵亡了！！！

六、如何解决？

搞过微信小程序的看官都知道，在小程序里面不像正常网页那样可以随便写js，在这里一切都要受限制！

微信小程序官方也有对应的文档，文档地址：
developers.weixin.qq.com/miniprogram/dev/api/system/system-info/wx.getSystemInfo.html?search-key=wx.getSystemInfo 。官方的文档向来都这样，要么不给案例，要么就简短的写下。现在的机型那么多，鬼知道怎么判断啊！于是我又在网上搜索后找到了现成的判断小程序是用安卓还是IOS打开的方法，原文地址：blog.csdn.net/niesiyuan000/article/details/80325988。

顺便补充一句，微信官方提供的判断依旧不全面，最新出来的苹果手机还没有完全支持！相关的坑可以在官方社区的问答中找到。坑！坑！坑！坑！坑！坑！坑！