Html 纯CSS菜单显示/隐藏转换非常慢

有一个纯CSS的移动友好菜单工作得非常好，除了它在实际的移动设备上非常慢

这里有一个

如果你缩小到320px左右，或者在手机上打开它，点击顶部的菜单（汉堡）图标，你会看到下面的导航菜单。在手机上，在某些页面上（图片靠近顶部），速度非常慢

有没有办法解决这个问题？我在很大程度上使用了这种方法：

我正在转换显示的字体大小和高度：内联导航元素。基本上，当您选中或取消选中复选框时，字体和高度会归零并返回（通过标签，即菜单图标）

任何帮助，甚至是以不同的方式来完成同一件事情的想法（没有javascript）都会让人震撼

一些相关CSS（手写笔）：

---

您知道页面已完全缩小且不可读吗？你能在这里发布实际的CSS吗？这样我们就可以看看过渡时间了？完全缩小了？（像gzip缩小？）不可读？喜欢字体在某些部分太小吗？是的，我可以放一些相关的CSS。不，不是模糊的-但不是人类的可分析性，而不是让你的浏览器重新绘制字体大小和高度（这是非常昂贵的）。。尝试设置元素的

transform:scale（）

动画。您知道页面已完全缩小且不可读吗？你能在这里发布实际的CSS吗？这样我们就可以看看过渡时间了？完全缩小了？（像gzip缩小？）不可读？喜欢字体在某些部分太小吗？是的，我可以放一些相关的CSS。不，不是模糊的-但不是人类的可分析性，而不是让你的浏览器重新绘制字体大小和高度（这是非常昂贵的）。。尝试设置元素的

变换：缩放（）

的动画。

  #nav-toggle (input of type checkbox)
    position absolute
    top 0
    visibility hidden

  #nav-toggle-label (the label of the above input)
    cursor pointer
    color coal
    font-size 3em

  #nav-toggle-label
    display inline-block
    width 30%
    vertical-align middle
    padding .5em 0 0 0

  #nav-toggle-label img
    height 40px

  #nav-toggle:checked ~ #nav
    height 0px
    font-size 0em