Bug 239033 – Select Option not respecting font; Always times new roman

• Component: Forms
• Status: REOPENED

[Jay C]

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);
    }
  }
}
```

[Alexey Proskuryakov]

*** This bug has been marked as a duplicate of bug 9600 ***

[Jay C]

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.

[Radar WebKit Bug Importer]

<rdar://problem/91851445>

[Myles C. Maxfield]

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

[Myles C. Maxfield]

Created attachment 458030 [details]
Test file

[Myles C. Maxfield]

Created attachment 458031 [details]
Screenshot

[Jay C]

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