Html Overflow-X使line使用chrome和firefox在android上渲染

我试图解决一个问题，即

CSS-overflow-x

会在每次h2之后使一行淡入淡出一秒钟。这仅在呈现（访问或刷新）网页时发生

这不会发生在计算机上的Chrome或Firefox上。iPhone8上的Safari也不会出现这种情况。 以下链接包含所有代码：

---

在这种情况下，文本元素不需要

overflow-x

，因为文本元素不会被剪切，所以只需使用

overflow:hidden

/*正文*/
身体{
溢出x：隐藏；
字体：16px/1“蒙特塞拉特”，Arial，Helvetica，无衬线；
颜色：白色；
背景：#101010；
保证金：0；
填充：0；
}
/*全球的*/
李{
列表样式：方形；
}
.集装箱{
文本对齐：居中；
宽度：90%；
保证金：自动；
}
/*画廊*/
#画廊，
#画廊卡，
#画廊音乐，
#画廊物质设计师{
字号：0；
列表样式：无；
大纲：无；
保证金：0；
填充：0；
}
#李画廊，
#画廊音乐李，
#画廊物质设计师李{
显示：内联块；
位置：相对位置；
保证金：2倍；
填充：0；
}
#李国章画廊{
显示：内联块；
位置：相对位置；
利润率：10px；
填充：0；
}
#画廊a，
#画廊卡a，
#音乐画廊a，
#画廊物质设计师a{
颜色：白色；
文字装饰：无；
大纲：无；
}
#画廊img，
#画廊卡img，
#画廊物质设计师{
光标：指针；
高度：自动；
宽度：300px；
最大宽度：100%；
保证金：0；
填充：0；
变换：比例（1）；
过渡：均为0.2s；
}
#画廊图片：悬停，
#画廊物质设计师img：悬停{
变换：比例（0.98）；
}
#画廊iframe，
#图库卡iframe，
#画廊音乐iframe，
#画廊物质设计师iframe{
最大宽度：100%；
保证金：0；
填充：0；
}
/*卡片*/
.卡片{
最大宽度：300px；
}
.信用卡信息，
.信用卡信息中心{
字体大小：12px；
背景：#202020；
保证金：0；
填充：15px；
过渡：均为0.3秒；
}
.信用卡信息{
文本对齐：左对齐；
}
.卡信息h2，
.信用卡信息中心h2{
保证金：0；
填充：0；
}
.card info p，
.信用卡信息中心{
保证金：0；
填充顶部：10px；
}
.卡价{
字体大小：16px；
边缘顶部：20px；
填充：0；
}
.信用卡价格{
文本对齐：右对齐；
保证金：0；
填充：0；
}
.卡：悬停.卡信息，
.卡：悬停.卡信息中心{
背景：404040；
}
/*淡入*/
.淡入{
动画：动画淡入1s；
}
@关键帧动画淡入{
从{
不透明度：0；
}
到{
不透明度：1；
}
}
/*台式机和笔记本电脑*/
@仅介质屏幕和（最大宽度：1085px）{
#全球集装箱，
#全球内容，
#幻灯片放映{
宽度：自动；
}
#关于个人资料，
#关于配置文件文本，
#全局侧栏{
浮动：无；
宽度：自动；
}
.详情{
宽度：100%；
利润率：0.20px；
}
.信息，
#系统需求{
填充：1px 10px 5px；
}
#关于分隔器{
背景：线性梯度（向左，#00000000%，#303030 50%，#00000000 100%）；
浮动：无；
宽度：自动；
高度：1px；
利润率：10px 10%0；
}
#幻灯片容器{
显示：块；
}
#幻灯片摘要{
文本对齐：居中；
浮动：无；
宽度：自动；
利润率：0.20px；
}
#幻灯片摘要部分{
显示：内联块；
垂直对齐：顶部；
文本对齐：对齐；
最大宽度：380px；
利润率：0.10px；
}
#幻灯片摘要img{
宽度：400px；
最大宽度：100%；
}
}
/*平板电脑和手机*/
@仅介质屏幕和（最大宽度：625px）{
/*隐藏导航*/
#航行{
显示：无；
}
/*显示导航图标*/
#导航图标{
显示：块；
}
/*展开正文以适应所有内容（否则导航图标栏将隐藏内容）*/
身体{
填充底部：52px；
}
/*下载内容调整大小*/
#下载内容{
最大宽度：100%；
最大高度：100%；
}
.卡片{
最大宽度：150px；
}
.信用卡信息中心h2{
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}
}

春节
测试

这解决了我的问题。奇怪的是，将它从overflow-x更改为just-overflow就足够了。谢谢你的帮助，哈米德！