边框 Radius 不使用垂直条形图在 iOS Safari (WebKit) 上渲染

作者: maxvanweenen创建于 2025年7月10日更新于 2025年12月16日
标签bug

说明 当使用plotObjects.bar. borderRadius在ApexCharts中带有垂直条形图时,圆角在大多数浏览器中都正确出现——除了iOS Safari(以及任何基于WebKit的iOS浏览器).

同样的配置在下列方面效果很好:

桌面色调/ 火花

Android浏览器(包括Chrome移动和Android模拟)

但失败于 :

iOS上的Safari(iPhone和iPads) 互联网档案馆的存檔,存档日期2013-12-21.

iOS上的克罗姆(由于强制WebKit)

重现的步骤 在 iOS 设备中打开此代码Pen 或模拟 Safari 移动设备 https://codepen.io/Travinns/pen/bNVGWEL 互联网档案馆的存檔,存档日期2013-12-02.

观察所有条都呈正方形( 条不是背景条)

在 Chrome (桌面或Android 仿真) 打开相同的代码Pen

注意条子正确圆形

预期行为 巴尔斯应该在包括iOS Safari在内的所有平台上有圆角(通过边界Radius).

实际行为 在iOS Safari(和iOS Chrome)上,纵有边框拉迪乌斯的应用,栏杆会以尖锐的平角出现.

截图

<img宽="336"高="295" alt="Image" src="https://GitHub.com/user-attachments/assets/4b0404e9-6641-4378-bb4a-e1b9d8dbca2a"/". 在机器人上。 工作如计划。

<img宽="344"高="280" alt="Image" src="https://GitHub.com/user-attachments/assets/7e324806-eb39-4739-a53f-097fb1908ab9" / > 打电话 边界不作圆相.

复制链接 https://codepen.io/Travinns/pen/bNVGWEL 互联网档案馆的存檔,存档日期2013-12-02.

这是一个最小的Vue Apex图的设置,可以清楚地显示这个问题. 工作在桌面/Android上,但不在iOS Safari上.

内容来源: apexcharts/apexcharts.js