AIEC-new/AIEC-server/css/safari-fix.css

/* ===== Safari 和苹果系统字体渲染修复 ===== */

/* 检测 Safari 浏览器 */
@supports (-webkit-touch-callout: none) {
    /* Safari 特定修复 */
    
    /* 修复对话输入框文本行距 */
    #messageInput,
    #chatModeMessageInput,
    textarea {
        /* 使用固定行高而非相对值 */
        line-height: 1.5 !important;
        /* 强制字体平滑 */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        /* 确保文本基线对齐 */
        vertical-align: baseline;
    }
    
    /* 修复聊天消息文本行距 */
    .message-content,
    .chat-message,
    .ai-message,
    .user-message {
        line-height: 1.6 !important;
        /* 使用像素值作为后备方案 */
        line-height: 24px !important;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    /* 修复按钮和标签文本对齐 */
    button,
    label,
    .menu-item {
        line-height: normal !important;
        display: flex;
        align-items: center;
    }
    
    /* 修复段落和列表行距 */
    p, li, div {
        line-height: inherit;
    }
    
    /* 确保代码块正确显示 */
    pre, code {
        line-height: 1.4 !important;
        -webkit-font-smoothing: auto;
    }
}

/* iOS 特定修复 */
@supports (-webkit-overflow-scrolling: touch) {
    /* iOS Safari 特定样式 */
    
    /* 修复输入框在 iOS 上的显示 */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    textarea {
        /* 禁用 iOS 默认样式 */
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        /* 修复行高 */
        line-height: normal !important;
        /* 修复字体大小以防止缩放 */
        font-size: 16px !important;
    }
    
    /* 修复 iOS 上的滚动性能 */
    .chat-container,
    #chatContainer,
    #chatMessages {
        -webkit-overflow-scrolling: touch;
        overflow-y: auto;
    }
    
    /* 修复 iOS 上的点击延迟 */
    button,
    a,
    .clickable {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
}

/* macOS 特定修复 */
@media (hover: hover) and (pointer: fine) {
    /* macOS 桌面浏览器 */
    
    /* 使用系统字体栈以获得最佳渲染 */
    body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    }
    
    /* 修复 macOS 上的字体渲染 */
    * {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }
    
    /* 代码字体优化 */
    code, pre, .monospace {
        font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace !important;
    }
}

/* 通用苹果设备修复 */
@supports (-webkit-touch-callout: none) or (-webkit-overflow-scrolling: touch) {
    /* 修复文本选择 */
    ::selection {
        background-color: rgba(0, 122, 255, 0.3);
        color: inherit;
    }
    
    /* 修复输入框占位符 */
    ::-webkit-input-placeholder {
        line-height: normal;
        opacity: 0.5;
    }
    
    /* 修复滚动条样式 */
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    
    ::-webkit-scrollbar-track {
        background: transparent;
    }
    
    ::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 4px;
    }
    
    ::-webkit-scrollbar-thumb:hover {
        background-color: rgba(0, 0, 0, 0.3);
    }
    
    /* 修复 flexbox 在 Safari 中的问题 */
    .flex,
    [class*="flex-"] {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
    }
    
    /* 修复 Safari 中的 100vh 问题 */
    .h-screen,
    [style*="height: 100vh"] {
        height: 100vh;
        height: -webkit-fill-available;
        min-height: -webkit-fill-available;
    }
}

/* 特定元素的行距修复 - 已由font-optimization.css处理 */
/* 保留特殊的padding设置 */
#chatModeMessageInput {
    /* 确保垂直居中 */
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}

/* 聊天消息容器行距修复 */
.message-bubble,
.chat-bubble {
    line-height: 1.5 !important;
    word-spacing: normal;
    letter-spacing: normal;
}

/* 修复中文字体渲染 */
:lang(zh),
:lang(zh-CN),
:lang(zh-TW),
:lang(zh-HK) {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif !important;
    line-height: 1.6 !important;
}

/* 修复表情符号显示 */
.emoji {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
    line-height: 1 !important;
}

/* 调试模式 - 可以临时启用查看行距 */
/*
* {
    outline: 1px solid rgba(255, 0, 0, 0.1);
}
*/