| Summary: | Dynamically added custom scrollbar styles don't apply | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | mustafa.0x | ||||||||
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> | ||||||||
| Status: | RESOLVED FIXED | ||||||||||
| Severity: | Normal | CC: | ap, bfulgham, simon.fraser, webkit-bug-importer | ||||||||
| Priority: | P2 | Keywords: | InRadar | ||||||||
| Version: | Safari Technology Preview | ||||||||||
| Hardware: | Unspecified | ||||||||||
| OS: | Unspecified | ||||||||||
| Attachments: |
|
||||||||||
This is a somewhat large script. Could you please clarify what makes you think that this is a browser engine bug? Created attachment 398239 [details]
safari-css-bug-simplified
Regardless of the script size, it shouldn't affect the scrollbar.
In any case, I made the script much lot simpler — one line.
So, for some reason, accessing `window.visualViewport.height` is affecting the scrollbars. Remove it and the scrollbars will be as set by the CSS.
Also, I previously mentioned that Chrome has the same issue. It does not in fact. Open the file in Chrome and the scrollbars will be set as the CSS says.
Does this reproduce in a recent STP? We fixed bug for sheets with large numbers of rules. Reproduced in Release 105 (Safari 13.2, WebKit 15610.1.10) Also, there aren't a large number of rules here. The whole file is 500 bytes. My guess is that the call to window.visualViewport.height triggers a layout before we see the custom scrollbar styles, then fail to dynamically change to the custom scrollbars. Created attachment 398274 [details]
Testcase
This testcase clarifies what's happening.
Pull request: https://github.com/WebKit/WebKit/pull/14386 Committed 265015@main (1ac712cb8d9b): <https://commits.webkit.org/265015@main> Reviewed commits have been landed. Closing PR #14386 and removing active labels. |
Created attachment 398033 [details] Bug reproduction See Attached file. Deleting line #23 will allow the ::-webkit-scrollbar styles to apply. Note: this also occurs in Chrome.