Bug 262883

Summary: Safari: The List is getting miss-aligned and it gets auto-fixed if we try to edit css from dev tool.
Product: WebKit Reporter: Manoj Kumar <manoj_kumar6>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: ahmad.saleem792, bfulgham, cdumez, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari 16   
Hardware: Unspecified   
OS: Unspecified   
Attachments:
Description Flags
The List is getting miss-aligned and it gets auto-fixed if we try to edit css from dev tool. none

Description Manoj Kumar 2023-10-09 04:12:33 PDT
Created attachment 468121 [details]
The List is getting miss-aligned and it gets auto-fixed if we try to edit css from dev tool.

We are facing one issue in Safari. We are able to reproduce this issue in 16.5 and 17.0 v.

Issue: we are dynamically adding some classes with parent element of the list to divide content into columns. We are using column-count  css for this. After applying the css, the disc position of the list item gets miss-aligned and it gets auto-fixed if we try to edit css from dev tool.


I have attached a video about the same issue.
Comment 1 Ahmad Saleem 2023-10-09 06:49:41 PDT
Can you share reduced test case and it seems to be 'repaint' because triggering from Web-Dev just fixes it without doing any changes (based on video)?

Changing to 'Layout & Rendering' rather than 'Bindings' based on video.

Plus @Manoj, you selected 'Safari 16', can you try with Safari 17 and Safari Technology Preview?
Comment 2 Manoj Kumar 2023-10-10 02:01:18 PDT
We have tested it in both 16.5 and 17.0 Safari version and able to replicate this bug.
Comment 3 Radar WebKit Bug Importer 2023-10-10 10:19:47 PDT
<rdar://problem/116745764>
Comment 4 Simon Fraser (smfr) 2023-10-10 10:20:01 PDT
Please provide a test case or URL where we can reproduce this problem. Thanks!