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:

/**
 * 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%;
	}

}

HTML:

<div class="recipe-categories justify-content-center">
	<a href="demos/recipes/recipes.html" data-animate="fadeInUp" class="recipe-category" style="background-image: url('demos/recipes/images/categories/bf.jpg');">
		<div class="recipe-category-inner">
			<div class="recipe-category-icon"><img src="demos/recipes/images/icons/bf.svg" alt="Breakfast"></div>
			<div class="recipe-category-info">Breakfast</div>
		</div>
	</a>

	<a href="demos/recipes/recipes.html" data-animate="fadeInUp" data-delay="100" class="recipe-category" style="background-image: url('demos/recipes/images/categories/lunch.jpg');">
		<div class="recipe-category-inner">
			<div class="recipe-category-icon"><img src="demos/recipes/images/icons/lunch.svg" alt="Lunch"></div>
			<div class="recipe-category-info">Lunch</div>
		</div>
	</a>

	<a href="demos/recipes/recipes.html" data-animate="fadeInUp" data-delay="200" class="recipe-category" style="background-image: url('demos/recipes/images/categories/dinner.jpg');">
		<div class="recipe-category-inner">
			<div class="recipe-category-icon"><img src="demos/recipes/images/icons/dinner.svg" alt="Dinner"></div>
			<div class="recipe-category-info">Dinner</div>
		</div>
	</a>

	<a href="demos/recipes/recipes.html" data-animate="fadeInUp" data-delay="300" class="recipe-category" style="background-image: url('demos/recipes/images/categories/desserts.jpg');">
		<div class="recipe-category-inner">
			<div class="recipe-category-icon"><img src="demos/recipes/images/icons/desserts.svg" alt="Desserts"></div>
			<div class="recipe-category-info">Desserts</div>
		</div>
	</a>

	<a href="demos/recipes/recipes.html" data-animate="fadeInUp" data-delay="400" class="recipe-category" style="background-image: url('demos/recipes/images/categories/veg.jpg');">
		<div class="recipe-category-inner">
			<div class="recipe-category-icon"><img src="demos/recipes/images/icons/vegan.svg" alt="Vegan"></div>
			<div class="recipe-category-info">Vegan</div>
		</div>
	</a>

	<a href="demos/recipes/recipes.html" data-animate="fadeInUp" data-delay="500" class="recipe-category" style="background-image: url('demos/recipes/images/categories/seafood.jpg');">
		<div class="recipe-category-inner">
			<div class="recipe-category-icon"><img src="demos/recipes/images/icons/seafood.svg" alt="Seafood"></div>
			<div class="recipe-category-info">Seafood</div>
		</div>
	</a>

	<a href="demos/recipes/recipes.html" data-animate="fadeInUp" data-delay="600" class="recipe-category" style="background-image: url('demos/recipes/images/categories/drinks.jpg');">
		<div class="recipe-category-inner">
			<div class="recipe-category-icon"><img src="demos/recipes/images/icons/drinks.svg" alt="Beverages"></div>
			<div class="recipe-category-info">Beverages</div>
		</div>
	</a>
</div>

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.