SearXNG图像搜索在Safari浏览器中的显示异常问题分析

问题现象

在Safari浏览器（包括MacOS和iOS版本）中访问自建SearXNG实例时，图像搜索结果会出现异常裁剪现象。该问题在Chrome等其他浏览器中不存在，属于WebKit内核浏览器的特定问题。

技术背景

1. 浏览器引擎差异：Safari和所有iOS/iPadOS浏览器均使用苹果的WebKit渲染引擎，这是导致跨浏览器表现不一致的根本原因
2. CSS兼容性：WebKit对某些CSS属性的解析与其他引擎存在差异
3. 响应式设计：SearXNG的前端采用了响应式布局，在不同引擎下的表现可能不一致

问题根源

通过测试分析发现：

• 图像容器的高度计算在WebKit中存在异常
• 图片的object-fit属性可能未被正确应用
• 父元素的flex布局在WebKit中产生了非预期的尺寸计算

影响范围

• 所有基于WebKit的浏览器（Safari、iOS/iPadOS上的所有浏览器）
• 桌面端和移动端均受影响
• 仅影响图像搜索结果，其他搜索类型正常

解决方案

1. CSS修正：针对WebKit添加特定的样式覆盖
2. 布局调整：修改图像容器的布局方式
3. 响应式优化：增强对不同浏览器引擎的适配性

技术建议

对于自建实例的用户：

1. 可临时通过修改主题CSS来缓解问题
2. 关注官方更新以获取永久修复
3. 在移动端可考虑使用渐进式增强技术优化显示

后续发展

该问题已被项目维护者确认并修复，后续版本将包含完整的WebKit兼容性改进。建议用户升级到包含修复的版本以获得最佳体验。