search

cockpit-project / cockpit-machines

Cockpit UI for virtual machines
GNU Lesser General Public License v2.1
281 stars 73 forks source link

Incorrect display of VM list #1318

Open hacketiwack opened 9 months ago

hacketiwack commented 9 months ago

Cockpit version: 305-1 Cockpit-podman version: 302-1 Podman version: 4.7.2 OS: Arch Linux Browser: Safari 17.1

Description The display of the list of VMs presents broken borders around each elements of the list. See below.

Cockpit-Machines-List-Bug

Steps to reproduce

  1. Open Cockpit Machines in Safari
  2. The list of items is not presented correctly
garrett commented 9 months ago

Note: This is related to https://github.com/cockpit-project/cockpit-podman/issues/1485.

This is a bug in WebKit, and having either zoomed text (especially after a reload after zooming) or HiDPI screens triggers it. This happens using Safari on Macs (which have HiDPI screens by default these days) and also on Linux, with GNOME Web.

Hopefully we can find a workaround, either something we can apply locally in the pages or as a PF-level workaround. And hopefully PatternFly itself can work around it (at least for default listings). Ideally, WebKit would just fix the problem and release a new version, as I don't think there's any complete workaround that would really work in all cases (and some cases, we can't really do anything different for alignments other than baseline, depending on the content).

As this was originally reported on 2022-07-25 in the WebKit bug tracking system against Safari 15 (and 17.1 is out now), and WebKit is tied to OS releases (in iOS, macOS, and major versions of WebKitGTK with GNOME), it might be some time before there's a proper fix upstream. Therfore, we should at least investigate some local workarounds, perhaps using different alignments and/or and/or fixing the minimum heights, and/or display types.

This affects Cockpit Client as well, as it is WebKitGTK based.