refactor(css): 添加 contain 属性优化布局性能

- 在多个组件样式中添加 contain: layout style 提升渲染性能
- 移除移动端浮动按钮的拖拽功能实现
- 简化 JavaScript 中的 FAB 元素初始化逻辑
- 清理未使用的拖拽相关事件监听器绑定代码
This commit is contained in:
hehh
2025-11-27 15:59:24 +08:00
parent 86468a9f77
commit f66c17095b
3 changed files with 8 additions and 69 deletions

View File

@@ -322,6 +322,7 @@ body {
/* 确保不继承任何可能影响文字的滤镜或动画 */
filter: none;
animation: none;
contain: layout style;
}
/* 黑夜模式下个人卡片发光效果 */
@@ -701,6 +702,7 @@ body {
flex-direction: column;
position: relative;
overflow: hidden;
contain: layout style;
}
@@ -708,6 +710,7 @@ body {
/* --- Interests --- */
.area-interests {
padding: 20px;
contain: layout style;
}
@@ -1563,6 +1566,7 @@ body {
text-align: center;
/* 创建独立的层叠上下文,防止动画影响子元素 */
isolation: isolate;
contain: layout style;
}
/* 增强版呼吸动画:多层光晕 + 色彩流动 */
@@ -1982,6 +1986,7 @@ body {
flex-direction: column;
position: relative;
overflow: hidden;
contain: layout style;
}
.card-header {
@@ -2048,6 +2053,7 @@ body {
text-decoration: none;
pointer-events: none; /* 禁用鼠标事件避免干扰 */
z-index: 10;
contain: layout style;
}
/* 白天模式下为 tag-color 类增强可读性 */
@@ -2851,6 +2857,7 @@ body {
text-decoration: none;
pointer-events: none;
z-index: 10;
contain: layout style;
}
/* Mobile Social */

View File

@@ -3,6 +3,7 @@
/* Base Artalk container styles */
#artalk-container {
border-radius: 12px;
contain: layout style;
}
/* 确保评论区域适配白天/黑夜模式 */