Docs

[drmodiho]

Hello,

when clicking on links or accordion, the buttons are flickering black/white. Do you have an idea why this occurs?

http://medibroad.net/

Thanks for any help in advance,

best regards, Moritz

[drmodiho]

This reply has been marked as private.

[Zeshan]

Hi Moritz,

Thanks for writing in!

I’ve checked your “Destination” page and tried changing the accordions but couldn’t replicate any issue. Would you mind confirming the issue again? Perhaps, you can provide us with some screenshots so we can take a closer look to the issue.

Thank you!

[drmodiho]

This reply has been marked as private.

[drmodiho]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing back. I have tested with mobile device but couldn’t see any flickering issue. The accordion is working as expected smoothly.

Kindly check from a different device.

Cheers!

[drmodiho]

Hey Rupok,

I think I found out what that flickering is. Its the default background flicker when clicking any link on touch devices.

I read it’s possible to handle that issue with -webkit-tap-highlight-color: rgba(0,0,0,0);.

It worked when addind the css to a specific item (for example: a.x-btn-navbar) No more flicker on the navbar mobil button.

Do you know if this is globally possible on all links, menus and tappable icons and features or do I need to add this to every thingle item css selector?

Thanks in advance,

best regards,

Moritz

[Rupok]

Hi Moritz,

Thanks for updating. Great find. You can add this CSS to apply this globally for all links out there :

input,
textarea,
button,
select,
a {
  -webkit-tap-highlight-color: rgba(0,0,0,0)!important;
}

Hope this helps.

Cheers!

[drmodiho]

Thanks so much. This worked for most parts 😉

It didn’t work for the tabbed content boxes which I have on my site: http://www.medibroad.com/kenya/

And it didnt work for the link menu of the essential grids on: http://www.medibroad.com/destinations/

Do you have any other idea?

Thanks again for your great help,

Best regards,

Moritz

[Rupok]

Hi Moritz,

Thanks for writing back. The above code should override all of these and I can see the code is working on all the links. If you face this on specific links then kindly add some screenshots to pint those elements as I can’t determine which link/tabbed content you are referring.

Cheers!

[drmodiho]

Hey Rubok,

1. all the navmenus of the essential grids: “Destinations” (See screenshot example)
2. all the tabbed content boxes: “Destinations > Kenya” (See screenshot example)

Thanks in advance,

Moritz

[drmodiho]

Hey Rubok,

I think I got it.

I added the bottom two selectors. Is that the right way?

.input,
.textarea,
.button,
.select,
.x-nav-tabs,
.esg-filterbutton,
a {
-webkit-tap-highlight-color: rgba(0,0,0,0)!important;
}

Cheers,

Moritz

[Jack]

Hi there Moritz,

That is indeed correct, glad to see you got this resolved! Let us know if we can be of any further assistance. 🙂

Thank you!

[drmodiho]

Cool 😉

Thanks a lot for your great help again.

Best regards,

Moritz

[Lely]

You’re welcome Moritz!

[Author]

Posts