Animations created by IntersectionObserver not working in Safari v11 | WordPress.org

Resolved surepoint
(@surepoint)

3 years, 5 months ago

Animations such as .slideInLeft or .slideInRight applied to content blocks are not working in iOS Safari Version 11.1.2 (11605.3.8.1).

The content blocks such as the columns at https://gmprimarycarecareers.org.uk/pharmacy remain invisible due to the .css below and the console is showing ReferenceError: Can’t find variable: IntersectionObserver called at line 52 in coblocks-animation.js

.coblocks-animate {
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}

IntersectionObserver API is supported on iOS Safari since 12.2. Can you provide a fix for older versions of Safari particularly for users who are unable to update Safari dues to iOS limitations.

The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)

Thread Starter surepoint
(@surepoint)

3 years, 5 months ago
Added the following media query adapted from https://browserstrangeness.bitbucket.io/css_hacks.html#safari to apply CSS rule to target iOS Safari 11 to override the opacity setting for any block with class = .coblocks-animate
```
@media not all and (min-resolution:.001dpcm) { 
	@supports (-webkit-appearance:none) and (stroke-color:transparent) { 
		.coblocks-animate {
		opacity: 1 !important;
			}
		} 
	}
```

Viewing 1 replies (of 1 total)

The topic ‘Animations created by IntersectionObserver not working in Safari v11’ is closed to new replies.

In: Plugins
1 reply
1 participant
Last reply from: surepoint
Last activity: 3 years, 5 months ago
Status: resolved