safari.php
88 lines
| 1 | <?php |
| 2 | |
| 3 | use Wolfcast\BrowserDetection; |
| 4 | |
| 5 | function kubio_safari_gap_fallback() { |
| 6 | $browser = new BrowserDetection(); |
| 7 | $version = $browser->getVersion(); |
| 8 | $os_version = $browser->getPlatformVersion( true ); |
| 9 | |
| 10 | $is_safari_without_gap_support = false; |
| 11 | |
| 12 | // because every browser on iOS is actually Safari we just check for the iOS version |
| 13 | if ( $browser->getPlatform() === BrowserDetection::PLATFORM_IOS && version_compare( $os_version, '14.5', '<' ) ) { |
| 14 | $is_safari_without_gap_support = true; |
| 15 | } |
| 16 | |
| 17 | if ( $browser->getPlatform() === BrowserDetection::PLATFORM_MACINTOSH && $browser->getName() === BrowserDetection::BROWSER_SAFARI && $browser->compareVersions( $version, '14' ) <= 1 ) { |
| 18 | $is_safari_without_gap_support = true; |
| 19 | } |
| 20 | |
| 21 | if ( $is_safari_without_gap_support ) { |
| 22 | add_action( |
| 23 | 'wp_head', |
| 24 | function () { |
| 25 | ?> |
| 26 | <script> |
| 27 | (function(){ |
| 28 | var flex = document.createElement('div'); |
| 29 | flex.style.display = 'flex'; |
| 30 | flex.style.flexDirection = 'column'; |
| 31 | flex.style.rowGap = '1px'; |
| 32 | |
| 33 | // create two, elements inside it |
| 34 | flex.appendChild(document.createElement('div')); |
| 35 | flex.appendChild(document.createElement('div')); |
| 36 | |
| 37 | // append to the DOM (needed to obtain scrollHeight) |
| 38 | document.documentElement.appendChild(flex); |
| 39 | var isSupported = flex.scrollHeight === 1; // flex container should be 1px high from the row-gap |
| 40 | flex.parentNode.removeChild(flex); |
| 41 | |
| 42 | if(!isSupported){ |
| 43 | console.warn('Kubio - Browser does not support flex gap '); |
| 44 | document.documentElement.classList.add('kubio-enable-gap-fallback'); |
| 45 | } |
| 46 | })(); |
| 47 | </script> |
| 48 | <?php |
| 49 | }, |
| 50 | 5 |
| 51 | ); |
| 52 | } |
| 53 | |
| 54 | if ( $browser->getPlatform() === BrowserDetection::PLATFORM_IOS || $browser->getPlatform() === BrowserDetection::PLATFORM_MACINTOSH ) { |
| 55 | add_action( |
| 56 | 'wp_head', |
| 57 | function () { |
| 58 | ?> |
| 59 | <script> |
| 60 | (function(){ |
| 61 | var docEL = document.documentElement; |
| 62 | var style = docEL.style; |
| 63 | if (!("backgroundAttachment" in style)) return false; |
| 64 | var oldValue = style.backgroundAttachment; |
| 65 | style.backgroundAttachment = "fixed"; |
| 66 | var isSupported = (style.backgroundAttachment === "fixed"); |
| 67 | style.backgroundAttachment = oldValue; |
| 68 | |
| 69 | if(navigator.userAgent.toLowerCase().indexOf('mac') !== -1 && navigator.maxTouchPoints){ |
| 70 | isSupported = false; |
| 71 | } |
| 72 | |
| 73 | if(!isSupported){ |
| 74 | console.warn('Kubio - Browser does not support attachment fix'); |
| 75 | document.documentElement.classList.add('kubio-attachment-fixed-support-fallback'); |
| 76 | } |
| 77 | })() |
| 78 | </script> |
| 79 | |
| 80 | <?php |
| 81 | }, |
| 82 | 5 |
| 83 | ); |
| 84 | } |
| 85 | } |
| 86 | |
| 87 | add_action( 'init', 'kubio_safari_gap_fallback' ); |
| 88 |