Previously I worked at Basecamp where I led the Research & Fidelity team and spent a decade designing, implementing, documenting, and maintaining front-and-back-end systems for multiple high-traffic applications.
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
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.
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.
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
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.
It was an absolute joy to chat with Javan and Sam. We very much enjoyed this episode and hope you will enjoy it, too.