Razworks

Razworks

iOS specific CSS

by

To target iOS specific devices:

@supports (-webkit-overflow-scrolling: touch) {
  /* CSS specific to iOS devices */ 
}

@supports not (-webkit-overflow-scrolling: touch) {
  /* CSS for other than iOS devices */ 
}

It works because only Safari Mobile implements -webkit-overflow-scrolling: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling

I used this because a WordPress Genesis responsive menu had some icon alignment discrepancies on iPhone only.
Here is the example in a media Query:

/*** IOS mobile icon adjustments ***/
	@supports (-webkit-overflow-scrolling: touch) {
		/* CSS specific to iOS devices */ 
		.genesis-nav-menu.responsive-menu .menu-item-has-children li {
			position: relative;	
		}
		.genesis-nav-menu.responsive-menu .menu-item-has-children > a {
			margin-right: 0;
		}
		
		.genesis-nav-menu.responsive-menu > .menu-item-has-children:before {
			content: "\f347";
			position:absolute;
			left:80%;
			float: none;
			font: normal 16px/1 'dashicons';
			height: 16px;
			padding: 15px 20px;
			right: 0;
			text-align: right;
			z-index: 9999;
			color:#fff;
		}
		
		.genesis-nav-menu.responsive-menu .menu-open.menu-item-has-children:before {
			content: "\f343";
		}
		.genesis-nav-menu.responsive-menu li a {
			font-size:30px;
			font-size:3.0rem;
		}

	  }