Modal/Dropdown: Missing icon

[chijun950314]

Dropdown: Button Down Icon and Modal Close Icon is missing in iOS 15

Bug already reported?

• [X] I confirm that I have checked if the bug already has been reported

For which framework/library you are reporting the bug

React, Angular

Component name

Dropdown

Description

The down icon and close icon is missing when using the dropdown component in iOS 15's safari browser. Here come with some screenshot.

I do make some investigation on it. I think it was related to 1 unsupported unit being used which is lh. Here's a link for your reference https://caniuse.com/?search=lh%20unit.

Steps To Reproduce

1. Implement a dropdown, here is an example:

<ngg-dropdown
		id="dropdown"
		label="choose_account"
		useValue="account_number"
		display="account_number" 
		[options]="[
		{
			account_balance: 1000,
			account_name: 'konto1',
			account_number: '24000000001'
		},
		{
			account_balance: 1000,
			account_name: 'konto2',
			account_number: '24000000002'
		},
		{
			account_balance: 1000,
			account_name: 'konto3',
			account_number: '24000000003'
		},
		{
			account_balance: 1000,
			account_name: 'konto4',
			account_number: '24000000004'
		},
		{
			account_balance: 1000,
			account_name: 'konto',
			account_number: '24000000005'
		},
		{
			account_balance: 1000,
			account_name: 'konto',
			account_number: '24000000006'
		},
		{
			account_balance: 1000,
			account_name: 'konto',
			account_number: '24000000007'
		},
		{
			account_balance: 1000,
			account_name: 'konto',
			account_number: '24000000008'
		},
		{
			account_balance: 1000,
			account_name: 'konto',
			account_number: '24000000009'
		},
		{
			account_balance: 1000,
			account_name: 'konto',
			account_number: '24000000010'
		},
		{
			account_balance: 1000,
			account_name: 'konto',
			account_number: '24000000011'
		},
		{
			account_balance: 1000,
			account_name: 'konto',
			account_number: '24000000012'
		},
	]"
	>
		<ng-template nggDropdownButton let-option="option">
			<div>
				<div>
					<div> {{ option.account_name }} </div>
					<div> {{ option.account_balance }} </div>
				</div> 
				<div>
				<small>{{ option.account_number }}
				</small>
				</div>
			</div>
		</ng-template>
		<ng-template nggDropdownOption let-option="option" let-index="index">
			<div>
				<div>
					<span>
						{{ option.account_name }}
					</span>
					<div class="account-total-value">
						{{ option.account_balance }}
					</div>
				</div>
				<small >{{ option.account_number }} </small>
			</div>
		</ng-template>
	</ngg-dropdown>

2. Run in safari from iOS 15 device.

Current Behaviour

Icon is missing from both the dropdown button and modal.

Expected Behaviour

Icon should appear in both the dropdown button and modal.

[EldRoos]

On iPhone/Safari 18+ this is not a problem:

https://storybook.seb.io/latest/react/iframe.html?args=&id=components-dropdown--default&viewMode=story https://storybook.seb.io/latest/angular/iframe.html?args=&id=components-dropdown--select&viewMode=story

So only for older versions.

[vsjolander]

I think this this was fixed in: https://github.com/seb-oss/green/pull/1972. Could you please check if this solved your issue?