Pretty cool idea. How about changing the zindex of the frames so you are layering the images on top of each other? This might solve the flickering because during the redraw the last frame is still visible. So, you’d just keep increasing the zindex value of the latest frame. Of course, there is a limit … Read more
If you’re using Modernizr, the no-touch class will be added to the root html element for non-touch devices. Then you can do this: a.myclass { color:#999; } .no-touch a.myclass:hover, a.myclass:active { color:#ccc; }
There’s a pretty good answer to this across at CSS Tricks – https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ .my-element { height: 100vh; /* Fallback for browsers that do not support Custom Properties */ height: calc(var(–vh, 1vh) * 100); } // First we get the viewport height and we multiple it by 1% to get a value for a vh unit … Read more
I’m using this test client side: if (navigator.userAgent.match(/Mac/) && navigator.maxTouchPoints && navigator.maxTouchPoints > 2) { …must be iPad OS… Since there’s no official touch screen for Mac, it seems pretty safe. The actual value of maxTouchPoints on the iPad is 5, BTW.
I recently ran into this same problem. You’ll need to pass { passive: false } when registering the touchmove event listener. e.g. document.addEventListener(‘touchmove’, function(e) { e.preventDefault(); }, { passive: false }); This is because document touch event listeners are now passive by default in Safari 11.1, which is bundled with iOS 11.3. This change is … Read more
iOS don’t support the W3C Spec web push notifications yet. But there is a Safari specific API for web notifications. Refer to this answer on multiple options you have. https://stackoverflow.com/a/49803408/1057093 Update: Corrected the Answer in the above link to clarify proprietary solution is only for OS X – Safari and no solution for iOS Safari … Read more
You need to add display: inline-block; to your anchor selector. Anchors are by definition inline elements and do not accept width, height, margin etc until they are defined as block level or inline-block elements.
This has to be a bug in iOS 4 Safari. Here’s what my behavior was with the following meta tags (the second tag is to make it full screen): <meta name=”viewport” content=”user-scalable=no, width=device-width”/> <meta name=”apple-mobile-web-app-capable” content=”yes”/> Page would scale correctly when going from portrait to landscape until I used the pop up keyboard to enter … Read more
Add xmlns=”http://www.w3.org/2000/svg” version=”1.1″ to your svg tag. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/html1/DTD/xhtml1-strict.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en-us”> <head> <title>SVG iPhone Test</title> </head> <body > <svg width=”500″ height=”220″ xmlns=”http://www.w3.org/2000/svg” version=”1.1″> <rect x=”2″ y=”2″ width=”496″ height=”216″ stroke=”#000″ stroke-width=”2px” fill=”transparent”></rect> </svg> </body> </html> The HTTP MIME type being delivered by http://www.invalidpage.com/svg/svgtest.html is “Content-Type: text/html”. HTML inline svg … Read more
The issue only occurs if the video element was dynamically created. If the element was just in the page as it loaded, z-index works fine. You can fix z-index on dynamically created videos by giving the video element -webkit-transform-style: preserve-3d. Yep, it’s as bad as haslayout on IE!