Fix "Fill" rounded buttons on mobile

[shahednasser]

On mobile devices (specifically iPhone), when clicking on buttons of type "Fill" the overlayed color doesn't fully fill the container button.

[Vansh1067]

can I work on this??

[shahednasser]

Sure!

[shahednasser]

It seems like no one is currently working on this issue if anyone is interested

[reveurguy]

the issue you are stating doesn't seem to exist. Has it been corrected?

[shahednasser]

@reveurguy It seems that this is happening to some buttons and not others. Please look at the screenshots for examples

[ahmadshiddiq]

I didn't see that problem honestly, everything works well in my device.

[shahednasser]

That's interesting @ahmad-shiddiq what device are you using? Maybe this will help narrow the problem down

[ahmadshiddiq]

I'm sorry, I thought that was IOS. I was trying on Ipad.

But I tried on my phone too, same didn't see any problem as you said.

[shahednasser]

Thank you for sharing that @ahmad-shiddiq . Will keep this issue for future reference then.

[samyev]

Hi, has this issue been resolved? if not, can I work on it?

[shahednasser]

@samyev it has not been resolved. We've been having trouble reproducing it. If you can reproduce and fix it then go ahead!

[kaf-lamed-beyt]

@shahednasser what exactly is the problem?

Are the buttons too round? On mobile? Please enlighten me, so I can try fixing it

[shahednasser]

@shahednasser what exactly is the problem?

Are the buttons too round? On mobile? Please enlighten me, so I can try fixing it

The problem can be found in this comment. Some buttons are not being filled completely. This proved tricky as it could not be reproduced on all devices.

[kaf-lamed-beyt]

@shahednasser what exactly is the problem?
Are the buttons too round? On mobile? Please enlighten me, so I can try fixing it

The problem can be found in this comment. Some buttons are not being filled completely. This proved tricky as it could not be reproduced on all devices.

Ok, I've seen it, I'd try fixing it.

I'd let you know if I can't

[ankitaugale23]

On mobile devices (specifically iPhone), when clicking on buttons of type "Fill" the overlayed color doesn't fully fill the container button.

Can I work on this?

[faraz16iqbal]

Is this issue still open?

[shahednasser]

@ankitaugale23 @faraz16iqbal you can work on it if you can reproduce it and find the solution for it (as it has been proven tricky to reproduce)

[samyev]

I'm not getting it, I implemented a function for recognition of the iPhone device, but the site ends up breaking, but the problem apparently is with the iPhone, on any other device the site works very well

[shahednasser]

I'm not getting it, I implemented a function for recognition of the iPhone device, but the site ends up breaking, but the problem apparently is with the iPhone, on any other device the site works very well

Yea but someone even tried it on an iPhone and it worked fine for them, that's why it's tricky. I think this should be done with CSS but honestly I haven't figured it out either. Thank you for working on it!

[kaf-lamed-beyt]

I'm not getting it, I implemented a function for recognition of the iPhone device, but the site ends up breaking, but the problem apparently is with the iPhone, on any other device the site works very well

You are right about this...

'cause while I was viewing it on my device (an android) it works fine

[samyev]

Não estou entendendo, implementei uma função de reconhecimento do aparelho iPhone, mas o site acaba quebrando, mas o problema aparentemente é com o iPhone, em qualquer outro aparelho o site funciona muito bem

Sim, mas alguém até experimentou em um iPhone e funcionou bem para eles, é por isso que é complicado. Acho que isso deveria ser feito com CSS, mas, honestamente, também não descobri. Obrigado por trabalhar nisso!

I believe that the problem may be with the version of the IOS system then, because it runs on one and the other does not. I've been researching deeper and saw that safari on iPhone ends up breaking the CSS of the sites.

[samyev]

Não estou entendendo, implementei uma função de reconhecimento do aparelho iPhone, mas o site acaba quebrando, mas o problema aparentemente é com o iPhone, em qualquer outro aparelho o site funciona muito bem

Você está certo sobre isso ...

porque enquanto eu estava visualizando no meu dispositivo (um Android), ele funciona bem

With mine too, and I realized that in some versions IOS it runs well, and in others the site does not open

[shahednasser]

Thank you for the inside @samyev . I guess we'll leave it open for now and see if we can ever find a fix for it.

[samyev]

Obrigado por dentro @samyev . Acho que vamos deixar em aberto por enquanto e ver se podemos encontrar uma solução para isso.

That’s okay ><

[abhishekrawe]

yes, I m intrested on this , please assign me.

[basvandenwijngaard]

I'm able to reproduce this with rounded buttons with the fill-animation effect (https://sbuttons.github.io/sbuttons/#fill-color-left) on an iPhone Xs, but also on Safari on macOs. I also have a possible fix for it.

[shahednasser]

Issue finally resolved. Thank you everyone!