iOS 16 shows <optgroup> tags label two times

Question

I tried to open https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup this link on any iPhone device except 16.0. It is showing properly.

That means for this code below:

<label for="dino-select">Choose a dinosaur:</label>
<select id="dino-select">
    <optgroup label="Theropods">
        <option>Tyrannosaurus</option>
        <option>Velociraptor</option>
        <option>Deinonychus</option>
    </optgroup>
    <optgroup label="Sauropods">
        <option>Diplodocus</option>
        <option>Saltasaurus</option>
        <option>Apatosaurus</option>
    </optgroup>
</select>

the output optgroup shows options properly.

But when trying in iOS 16.0 (iPhone 13 pro max), then it is showing as this:-

https://i.stack.imgur.com/MHw35.png

That mean, for label text, it is showing two times. label="Theropods" and label="Sauropods" is shown two times.

Don't know how to solve it! Seems like iOS 16 bug, Any Idea?

Answer 1

I noticed this as well, it does appear to be an iOS/Safari bug

Answer 2

Yes, this is happening on iOS 16 and iPadOS 16. Here's the bug report for webkit if you want to follow updates.

https://bugs.webkit.org/show_bug.cgi?id=247204

Answer 3

It was regression due to iOS improving in showing options and values and the fix is already pushed to Webkit as Pull Request below - https://github.com/WebKit/WebKit/pull/6090

Answer 4

I saw the pr is merged, but it still shows label as duplicated.