307455 2026-02-10 11:46:22 -0800 CSS Custom Highlight API incompatible on Flexbox nodes 2026-02-11 23:01:57 -0800 1 1 1 Unclassified WebKit Layout and Rendering Safari 26 Mac (Apple Silicon) macOS 26 NEW InRadar P2 Normal --- 307614 1 zachleatherman webkit-unassigned bfulgham karlcow megan_gardner rik simon.fraser thorton webkit-bug-importer wenson_hsieh zalan oldest_to_newest 2179935 0 zachleatherman 2026-02-10 11:46:22 -0800 Using the Custom Highlight API on a `display: flex` or `display: inline-flex` node doesn’t render the highlighted ranges. e.g. `<div style="display: flex">I want to highlight some text in here</div>` Reproduction: https://codepen.io/zachleat/pen/MYeZYEN fails in Safari 26.2 and Safari Technology Preview Release 236 (WebKit 21625.1.1.19.1). Works as expected in Firefox 147 and Chrome 144. Just for completeness, a link to the Custom Highlight API: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API 2179944 1 zachleatherman 2026-02-10 12:04:01 -0800 Current workaround is to add an additional child node: `<div style="display: flex"><div>I can reliably highlight text in here</div></div>` 2179946 2 478306 rik 2026-02-10 12:07:59 -0800 Created attachment 478306 Testcase I've adapted Zach's testcase by: - Adding grid and table examples: to check if it was flex specific or a larger issue. It is a larger issue. - Add variants of each with a "real" element: after adding the other cases, I had a hunch it might be related to flex/grid/table creating "anonymous elements" to lay things out. Those variants tend to confirm my hunch (although I'm sure "anonymous elements" ain't the correct term). - Removing inline-flex: With the other examples I added, I felt it was an unnecessary variant to keep. I haven't removed the flex reference from the title of the bug because I wasn't sure what to put instead. 2180484 3 karlcow 2026-02-11 15:34:54 -0800 Thanks, Zac and Anthony. Very useful test case. 2180485 4 webkit-bug-importer 2026-02-11 15:35:13 -0800 <rdar://problem/170181823> 2180661 5 karlcow 2026-02-11 23:01:57 -0800 I have created a WPT test for it. https://github.com/WebKit/WebKit/pull/58456 That I will export to web-platform-test as soon as it has been reviewed. 478306 2026-02-10 12:07:59 -0800 2026-02-10 12:07:59 -0800 Testcase bug_307455.html text/html 3746 rik PCFkb2N0eXBlIGh0bWw+CjxodG1sIGxhbmc9ZW4+Cjx0aXRsZT5CdWcgMzA3NDU1IC0gQ3VzdG9t IEhpZ2hsaWdodCBBUEkgYnVnPC90aXRsZT4KPHN0eWxlPgo6OmhpZ2hsaWdodChzZWFyY2gtcmVz dWx0cykgewogIGJhY2tncm91bmQtY29sb3I6ICNmZjAwNjY7CiAgY29sb3I6IHdoaXRlOwp9Cjwv c3R5bGU+Cgo8aDE+U2hvdWxkIHNlZSBNYXhpbWUgaGlnaGxpZ2h0ZWQgaW4gZXZlcnkgaW5zdGFu Y2U8L2gxPgo8cD4KICA8c3Ryb25nPkNvbnRyb2w8L3N0cm9uZz46IE1heGltZSBkZWJpdGlzIGhp YywgZGVsZWN0dXMgcGVyc3BpY2lhdGlzIGxhYm9ydW0gbW9sZXN0aWFlIGxhYm9yZSwgZGVsZW5p dGksIHF1YW0gY29uc2VxdWF0dXIgaXVyZSB2ZW5pYW0gYWxpYXMgdm9sdXB0YXMgbmlzaSBxdW8u IERvbG9yZW0gZWFxdWUgYWxpYXMsIHF1byB2ZWwgcXVhcyByZXB1ZGlhbmRhZSBhcmNoaXRlY3Rv IGRlc2VydW50IHF1aWRlbSwgc2FwaWVudGUgbGF1ZGFudGl1bSBudWxsYS4KPC9wPgo8cCBzdHls ZT0iZGlzcGxheTogZmxleCI+CiAgPHN0cm9uZz5mbGV4PC9zdHJvbmc+OiBNYXhpbWUgZGViaXRp cyBoaWMsIGRlbGVjdHVzIHBlcnNwaWNpYXRpcyBsYWJvcnVtIG1vbGVzdGlhZSBsYWJvcmUsIGRl bGVuaXRpLCBxdWFtIGNvbnNlcXVhdHVyIGl1cmUgdmVuaWFtIGFsaWFzIHZvbHVwdGFzIG5pc2kg cXVvLiBEb2xvcmVtIGVhcXVlIGFsaWFzLCBxdW8gdmVsIHF1YXMgcmVwdWRpYW5kYWUgYXJjaGl0 ZWN0byBkZXNlcnVudCBxdWlkZW0sIHNhcGllbnRlIGxhdWRhbnRpdW0gbnVsbGEuCjwvcD4KPHAg c3R5bGU9ImRpc3BsYXk6IGZsZXgiPgogIDxzdHJvbmc+ZmxleCB3aXRoICJyZWFsIiBlbGVtZW50 PC9zdHJvbmc+CiAgPHNwYW4+OiBNYXhpbWUgZGViaXRpcyBoaWMsIGRlbGVjdHVzIHBlcnNwaWNp YXRpcyBsYWJvcnVtIG1vbGVzdGlhZSBsYWJvcmUsIGRlbGVuaXRpLCBxdWFtIGNvbnNlcXVhdHVy IGl1cmUgdmVuaWFtIGFsaWFzIHZvbHVwdGFzIG5pc2kgcXVvLiBEb2xvcmVtIGVhcXVlIGFsaWFz LCBxdW8gdmVsIHF1YXMgcmVwdWRpYW5kYWUgYXJjaGl0ZWN0byBkZXNlcnVudCBxdWlkZW0sIHNh cGllbnRlIGxhdWRhbnRpdW0gbnVsbGEuPC9zcGFuPgo8L3A+CjxwIHN0eWxlPSJkaXNwbGF5OiBn cmlkIj4KICA8c3Ryb25nPmdyaWQ8L3N0cm9uZz46IE1heGltZSBkZWJpdGlzIGhpYywgZGVsZWN0 dXMgcGVyc3BpY2lhdGlzIGxhYm9ydW0gbW9sZXN0aWFlIGxhYm9yZSwgZGVsZW5pdGksIHF1YW0g Y29uc2VxdWF0dXIgaXVyZSB2ZW5pYW0gYWxpYXMgdm9sdXB0YXMgbmlzaSBxdW8uIERvbG9yZW0g ZWFxdWUgYWxpYXMsIHF1byB2ZWwgcXVhcyByZXB1ZGlhbmRhZSBhcmNoaXRlY3RvIGRlc2VydW50 IHF1aWRlbSwgc2FwaWVudGUgbGF1ZGFudGl1bSBudWxsYS4KPC9wPgo8cCBzdHlsZT0iZGlzcGxh eTogZ3JpZCI+CiAgPHN0cm9uZz5ncmlkIHdpdGggInJlYWwiIGVsZW1lbnQ8L3N0cm9uZz4KICA8 c3Bhbj46IE1heGltZSBkZWJpdGlzIGhpYywgZGVsZWN0dXMgcGVyc3BpY2lhdGlzIGxhYm9ydW0g bW9sZXN0aWFlIGxhYm9yZSwgZGVsZW5pdGksIHF1YW0gY29uc2VxdWF0dXIgaXVyZSB2ZW5pYW0g YWxpYXMgdm9sdXB0YXMgbmlzaSBxdW8uIERvbG9yZW0gZWFxdWUgYWxpYXMsIHF1byB2ZWwgcXVh cyByZXB1ZGlhbmRhZSBhcmNoaXRlY3RvIGRlc2VydW50IHF1aWRlbSwgc2FwaWVudGUgbGF1ZGFu dGl1bSBudWxsYS48L3NwYW4+CjwvcD4KPHAgc3R5bGU9ImRpc3BsYXk6IHRhYmxlIj4KICA8c3Ry b25nPnRhYmxlPC9zdHJvbmc+OiBNYXhpbWUgZGViaXRpcyBoaWMsIGRlbGVjdHVzIHBlcnNwaWNp YXRpcyBsYWJvcnVtIG1vbGVzdGlhZSBsYWJvcmUsIGRlbGVuaXRpLCBxdWFtIGNvbnNlcXVhdHVy IGl1cmUgdmVuaWFtIGFsaWFzIHZvbHVwdGFzIG5pc2kgcXVvLiBEb2xvcmVtIGVhcXVlIGFsaWFz LCBxdW8gdmVsIHF1YXMgcmVwdWRpYW5kYWUgYXJjaGl0ZWN0byBkZXNlcnVudCBxdWlkZW0sIHNh cGllbnRlIGxhdWRhbnRpdW0gbnVsbGEuCjwvcD4KPHAgc3R5bGU9ImRpc3BsYXk6IHRhYmxlIj4K ICA8c3Ryb25nPnRhYmxlIHdpdGggInJlYWwiIGVsZW1lbnQ8L3N0cm9uZz4KICA8c3Bhbj46IE1h eGltZSBkZWJpdGlzIGhpYywgZGVsZWN0dXMgcGVyc3BpY2lhdGlzIGxhYm9ydW0gbW9sZXN0aWFl IGxhYm9yZSwgZGVsZW5pdGksIHF1YW0gY29uc2VxdWF0dXIgaXVyZSB2ZW5pYW0gYWxpYXMgdm9s dXB0YXMgbmlzaSBxdW8uIERvbG9yZW0gZWFxdWUgYWxpYXMsIHF1byB2ZWwgcXVhcyByZXB1ZGlh bmRhZSBhcmNoaXRlY3RvIGRlc2VydW50IHF1aWRlbSwgc2FwaWVudGUgbGF1ZGFudGl1bSBudWxs YS48L3NwYW4+CjwvcD4KCjxwPkFkYXB0ZWQgZnJvbSA8YSBocmVmPSJodHRwczovL2NvZGVwZW4u aW8vemFjaGxlYXQvcGVuL01ZZVpZRU4iPmluaXRpYWwgQ29kZXBlbjwvYT4uPC9wPgoKPHNjcmlw dD4KY29uc3QgdHJlZVdhbGtlciA9IGRvY3VtZW50LmNyZWF0ZVRyZWVXYWxrZXIoZG9jdW1lbnQu Ym9keSwgTm9kZUZpbHRlci5TSE9XX1RFWFQpOwpjb25zdCBhbGxUZXh0Tm9kZXMgPSBbXTsKbGV0 IGN1cnJlbnROb2RlID0gdHJlZVdhbGtlci5uZXh0Tm9kZSgpOwp3aGlsZSAoY3VycmVudE5vZGUp IHsKICBhbGxUZXh0Tm9kZXMucHVzaChjdXJyZW50Tm9kZSk7CiAgY3VycmVudE5vZGUgPSB0cmVl V2Fsa2VyLm5leHROb2RlKCk7Cn0KCi8vIENsZWFyIHRoZSBIaWdobGlnaHRSZWdpc3RyeSB0byBy ZW1vdmUgdGhlCi8vIHByZXZpb3VzIHNlYXJjaCByZXN1bHRzLgpDU1MuaGlnaGxpZ2h0cy5jbGVh cigpOwoKLy8gQ2xlYW4tdXAgdGhlIHNlYXJjaCBxdWVyeSBhbmQgYmFpbC1vdXQgaWYKLy8gaWYg aXQncyBlbXB0eS4KY29uc3Qgc3RyID0gIm1heGltZSI7CgovLyBJdGVyYXRlIG92ZXIgYWxsIHRl eHQgbm9kZXMgYW5kIGZpbmQgbWF0Y2hlcy4KY29uc3QgcmFuZ2VzID0gYWxsVGV4dE5vZGVzCi5t YXAoKGVsKSA9PiAoeyBlbCwgdGV4dDogZWwudGV4dENvbnRlbnQudG9Mb3dlckNhc2UoKSB9KSkK Lm1hcCgoeyB0ZXh0LCBlbCB9KSA9PiB7CiAgY29uc3QgaW5kaWNlcyA9IFtdOwogIGxldCBzdGFy dFBvcyA9IDA7CiAgd2hpbGUgKHN0YXJ0UG9zIDwgdGV4dC5sZW5ndGgpIHsKICAgIGNvbnN0IGlu ZGV4ID0gdGV4dC5pbmRleE9mKHN0ciwgc3RhcnRQb3MpOwogICAgaWYgKGluZGV4ID09PSAtMSkg YnJlYWs7CiAgICBpbmRpY2VzLnB1c2goaW5kZXgpOwogICAgc3RhcnRQb3MgPSBpbmRleCArIHN0 ci5sZW5ndGg7CiAgfQoKICAvLyBDcmVhdGUgYSByYW5nZSBvYmplY3QgZm9yIGVhY2ggaW5zdGFu Y2Ugb2YKICAvLyBzdHIgd2UgZm91bmQgaW4gdGhlIHRleHQgbm9kZS4KICByZXR1cm4gaW5kaWNl cy5tYXAoKGluZGV4KSA9PiB7CiAgICBjb25zdCByYW5nZSA9IG5ldyBSYW5nZSgpOwogICAgcmFu Z2Uuc2V0U3RhcnQoZWwsIGluZGV4KTsKICAgIHJhbmdlLnNldEVuZChlbCwgaW5kZXggKyBzdHIu bGVuZ3RoKTsKICAgIHJldHVybiByYW5nZTsKICB9KTsKfSk7CgovLyBDcmVhdGUgYSBIaWdobGln aHQgb2JqZWN0IGZvciB0aGUgcmFuZ2VzLgpjb25zdCBzZWFyY2hSZXN1bHRzSGlnaGxpZ2h0ID0g bmV3IEhpZ2hsaWdodCguLi5yYW5nZXMuZmxhdCgpKTsKCi8vIFJlZ2lzdGVyIHRoZSBIaWdobGln aHQgb2JqZWN0IGluIHRoZSByZWdpc3RyeS4KQ1NTLmhpZ2hsaWdodHMuc2V0KCJzZWFyY2gtcmVz dWx0cyIsIHNlYXJjaFJlc3VsdHNIaWdobGlnaHQpOwo8L3NjcmlwdD4=