Created attachment 457170 [details] Movie of bug I have a select tag in a not-so-unique situation: 1. container div styles the "select" 2. select is actually opacity: 0 3. select options are showing Times New Roman for the font, even though it's all explicitly set I've attached a video of Safari 15 on the left, and Firefox on the right. The option should at least be SOME sans-serif. No matter what I try it is not happening. ``` // HTML <div class="RecentPostsStyles_recentPost__select__hnmLS"><select><option value="">All Types</option><option value="blog">Blog</option></select><span>All types</span><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform: rotate(0.25turn);"><path d="M10 17L15 12L10 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></div> // Sass .recentPost__select { align-items: center; background-color: var(--theme-surface); border: thin solid var(--color-black); border-radius: var(--border-radius); display: flex; justify-content: space-between; overflow: hidden; padding: 0 1.6rem; position: relative; span { font: var(--type-body-xs); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; pointer-events: none; } select { appearance: none; background-color: transparent; border: none; flex: 1; font: var(--type-body-xs); left: 0; padding: 1.6rem; position: absolute; opacity: 0; top: 0; width: 100%; option: { font: var(--type-body-xs); } } } ```
*** This bug has been marked as a duplicate of bug 9600 ***
This is not a duplicate of #9600, this is a specific Safari bug displaying Times New Roman when it clearly shouldn't in the test case.
<rdar://problem/91851445>
I copied the code above into a file and opened it, and didn't see the bug reproduce (file and screenshot attached). Do you think you could do any of: 1. Provide a link to a website which has this bug that we can access 2. Save a page that demonstrates the problem as a webarchive (File -> Save as -> Format: Web Archive) 2. Provide content which demonstrates the problem 3. Provide a link to a jsfiddle or something like that that demonstrates the problem
Created attachment 458030 [details] Test file
Created attachment 458031 [details] Screenshot
Hi Myles, An example of this bug happening is at https://www.demostack.com/resources. 1. Scroll down to the "Recent posts" section 2. Open the filter menus there next to the search field 3. You'll see Times New Roman in Safari for the <options> even though a sans-serif is specifically set