incompatibility between iphone and Android

Hello,

Thanks for reporting this and Apologies for the Inconveniences caused!

We are looking into this and will get back to you with a solution shortly. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

Hello,

Apologies for the Delays in replying to your Support Query.

We have updated this Component entirely. Please consider using the following codes:

CSS:
[ch_pre type="css"]/**

• Recipe Categories
  */

.recipe-categories {
display: flex;
flex-wrap: wrap;
align-items: stretch;
}

.recipe-category {
position: relative;
overflow: hidden;
flex: 0 0 calc(100% - 20px);
max-width: calc(100% - 20px);
margin: 10px;
height: 80px;
background-size: cover;
background-position: center center;
border-radius: 250px;
transition: all 0.5s cubic-bezier(.02, .01, .5, 1);
}

.recipe-category::after {
position: absolute;
content: '';
left: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 1;
background-color: rgba(0,0,0,0.2);
}

.recipe-category-inner {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
top: 0;
left: 0;
padding: 10px;
z-index: 2;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 1px;
}

.recipe-category-icon {
width: 40px;
height: 40px;
margin: 0;
display: flex;
justify-content: center;
text-align: center;
border-radius: 100%;
background-color: #FFF;
padding: 8px;
margin-right: 10px;
color: #000;
transition: transform .5s ease-out;
}

.recipe-category:hover .recipe-category-icon {
transform: rotate(360deg);
}

.recipe-category-info {
color: #FFF;
font-size: 18px;
text-align: center;
}

@media (min-width: 768px) {

.recipe-category {
	flex: 0 0 calc(50% - 20px);
	max-width: calc(50% - 20px);
}

}

@media (min-width: 992px) {

.recipe-category {
	flex: 0 0 60px;
	max-width: 60px;
	height: 300px;
	margin: 15px;
	background-size: auto 105%;
	background-position: center;
	border-radius: 30px;
}

.recipe-category:hover {
	flex: 0 0 250px;
	max-width: 250px;
	background-size: auto 100%;
	border-radius: 10px;
}

.recipe-category-inner {
	width: auto;
	height: auto;
	left: 0;
	top: auto;
	bottom: 0;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	transform: rotate(180deg);
}

.recipe-category:hover .recipe-category-inner {
	writing-mode: horizontal-tb;
	transform: rotate(0);
}

.recipe-category:not(:hover) .recipe-category-icon {
	width: 40px;
	height: 40px;
	margin-right: 0;
	margin-bottom: 10px;
	transform: rotate(180deg);
}

.recipe-category::after {
	background: -webkit-linear-gradient(to bottom, rgba(0,0,0,0) 70%, rgba(0,0,0,0.8)) 100%;
	background: -o-linear-gradient(to bottom, rgba(0,0,0,0) 70%, rgba(0,0,0,0.8)) 100%;
	background: linear-gradient(to bottom, rgba(0,0,0,0) 70%, rgba(0,0,0,0.8)) 100%;
}

}[/ch_pre]

HTML:
[ch_pre]
[

		Breakfast
	
](demos/recipes/recipes.html)

[

		Lunch
	
](demos/recipes/recipes.html)

[

		Dinner
	
](demos/recipes/recipes.html)

[

		Desserts
	
](demos/recipes/recipes.html)

[

		Vegan
	
](demos/recipes/recipes.html)

[

		Seafood
	
](demos/recipes/recipes.html)

[

		Beverages
	
](demos/recipes/recipes.html)

[/ch_pre]

You will need to replace the existing old codes with the above codes completely.

This should definitely fix the issue. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.