LouisMazel/maz-ui

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

sourcecodeit opened this issue · 4 comments

sourcecodeit commented

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
image
image

Smartphone (please complete the following information):

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

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

image image image
sourcecodeit commented

I added this code to fix it:

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

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

sourcecodeit commented

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!