[Issue][MazBottomSheet, MazDialog] Huge "X" icon on iOS

[Diego Imbriani]

Describe the bug
MazBottomSheet and MazDialog show a huge "X" icon on iOS (tested on simulator). If you change any CSS property from the inspector it fixes it immediatley.

To Reproduce
I don't have a public URL

Expected behavior
"X" icon with correct icon.

Screenshots

Smartphone (please complete the following information):

• Device: iPhone 14 (iOS simulator )
• OS: iOS 14

[Diego Imbriani]

It looks like a CSS conflict but it looks all fine and it doesn't happen on Chrome.

[Diego Imbriani]

I added this code to fix it:

.m-backdrop-content {
	.m-bottom-sheet__close, 
	.m-dialog-closebtn {
		width: 44px;
	}
}

[Mazel]

Hi @sourcecodeit,

In your inspector and in your CSS rules I can see :

span svg {
  height: 100%;
  width: 100%;
}

Where does this rule come from? I think this rule is the problem.
It's not the CSS of maz-ui.

You can try the component from the documentation in the simulator to test it: https://maz-ui.com/components/maz-dialog

[Diego Imbriani]

You

Hi @sourcecodeit,

In your inspector and in your CSS rules I can see :

You're right! That's a not-scoped rule I put in a component, thanks!