When input and media elements are adopted with document.adoptNode() from a foreign document (via DOMParser, for example) they lose their native shadow DOM roots and are left in a mostly broken state: <input>s lose their native UI, and <video> and <audio> elements lose their native controls.
To reproduce, open the attached adopt-node-bug.html file in Safari and compare the correct middle column (imported node) to the incorrect right column (adopted node).
Tested in Safari v14.0.3 (16610.4.3.1.4) on macOS v11.2.2, and mobile Safari on iOS v14.4.
To reproduce: Open the attached template-img-srcset.html file in Safari on a 2x DPR or higher display.
Expected: Both images load the same URL.
Actual: The first image loads the correct URL. The second image (cloned from a <template>) incorrectly loads the first URL from its srcset.
Here is another example that demonstrates the issue. It works by canceling the "beforeinput" event and applying the target range to the selection to illustrate it.
1. Open the attached "select-target-range.html" file in Chrome
2. Place the cursor at the end of each line and press Cmd+Delete
3. Observe the selection, which represents the target range
4. Not that it doesn't match the actual range of text to be removed
To reproduce:
1. Open System Preferences → Keyboard → Text and add entry to replace "cat" with "Cat"
2. Open the attached datalist.html file in Safari
3. Ensure that the menu option for Edit → Substitutions → Text Replacement is selected
3. Type "cat" in the text field and wait for the "Cat" replacement overlay to appear
4. Click any option from the expanded <datalist> menu and Safari will crash
Tested on macOS 10.14.6 (18G103) with Safari 13.0.2 (14608.2.40.1.3) and Safari TP Release 94 (Safari 13.1, WebKit 14609.1.6.1). I believe this issue occurs in Safari 12.1 as well.
Dealing with incoming email, composing rich-text content, connecting to multiple databases, parallelizing test runs, integrating JavaScript with love, and rewriting the code loader. These are fundamental improvements to the fundamentals of working with the web and building fast and fresh applications. This is the kind of work we’ve been doing for the past fifteen years, and we’re still at it. THIS IS RAILS SIX!
Steps to reproduce the problem:
1. Open the attached cut.html file and click "Cut All" (or, use the Edit → Cut menu)
What is the expected behavior?
The cut operation completes in a reasonable amount of time.
What went wrong?
The cut operation takes several seconds to complete. The Performance inspector reveals a very slow Layout task. See the attached .gif for a comparison by browser.
Chrome: 5,177ms
Firefox: 19ms
Safari: 147ms
Did this work before? N/A
Does this work in other browsers? N/A
Chrome version: 76.0.3809.100 Channel: stable
OS Version: OS X 10.14.6
Flash Version:
Today’s guest is Javan Makhmali, who works for Basecamp and helped develop Trix. Trix is a rich text editor for the web, made purposefully simple for everyday use instead of a full layout tool. Trix is not the same as Tiny MCE, and Javan discusses some of the differences. He talks about the benefits of using Trix over other native browser features for text editing. He talks about how Trix has simplified the work at Basecamp, especially when it came to crossing platforms. Javan talks more about how Trix differs from other text editors like Google Docs and contenteditable, how to tell if Trix is functioning correctly, and how it works with Markdown.
twitter.com/javan/status/1388215254685990915
bugs.webkit.org/show_bug.cgi?id=222657
bugs.chromium.org/p/chromium/issues/detail?id=1043564#c7
