Okay, not what your actual code looks like, but you can’t throw JavaScript variables into CSS, it won’t recognize them. Instead, you need to create the CSS rules through JavaScript and insert them into the CSSOM (CSS Object Model). This can be done a few ways — you can either just create a keyframe animation … Read more
Someone posted an answer, that showed a workaround for this. The idea is to set height and width to 0 before deleting the canvases. It is not really a proper solution, but it will work in my cache system. I add a small example that creates canvases until an exception is thrown, then empties the … Read more
For hammer.js 2.0+ I have taken @DGS answer and changed it to suit what I was doing with cordova and intel-xdk so it’s pure JS and hammer.js 2.0 for webkit. My implementation allows you to zoom and drag at the same time, not independent of each other as above, and provides for a more native … Read more
You should at minimum add an empty translate3d declaration: transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); This will help performance immensely on iOS, as demonstrated by Remy Sharp, because it causes iOS to use hardware-acceleration. If you want to go further, refactor the animation to use a webkit translation transform, rather than animating the ‘top’ property. In the … Read more
Answer (Big thanks to @paulvs ) To check if your WKWebView has loaded easily implement the following method: import WebKit import UIKit class ViewController: UIViewController, WKNavigationDelegate { let webView = WKWebView() func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) { print(“loaded”) } override func viewDidLoad() { super.viewDidLoad() let url = URL(string: “https://www.yourwebsite.com/”) ! let request = … Read more
You are correct that WebKit ignores the width declaration on the scrollbar-thumb. It also ignores it on the track. The problem with using a border is that it draws the border within the thumb, so if you just make the colour transparent, it will not work. The solution is to change where the background is … Read more
I know this is a couple of years old, but I’ll add my thoughts after some investigation in to issue while writing a reset stylesheet for a project. NOTE** This is based on looking through the Firefox source because it was the easiest to obtain and read through. However, based on similar behaviour in other … Read more
This is only as reliable as beforeunload, but seems to work (tested in Firefox and Chrome). I definitely favour it over a polling solution. // Tell the SharedWorker we’re closing addEventListener( ‘beforeunload’, function() { port.postMessage( {command:’closing’} ); }); Then handle the cleanup of the port object in the SharedWorker. e.ports[0].onmessage = function( e ) { … Read more
It is fairly easy to achieve using Mari M’s background-color: inherit; technique in addition with -webkit-background-clip: text;. Live demo; https://jsfiddle.net/s10f04du/ @media screen and (-webkit-min-device-pixel-ratio:0) { .container { overflow-y: scroll; overflow-x: hidden; background-color: rgba(0,0,0,0); -webkit-background-clip: text; transition: background-color .8s; } .container:hover { background-color: rgba(0,0,0,0.18); } .container::-webkit-scrollbar-thumb { background-color: inherit; } }
Add the vendor prefix in the transitions: p { -webkit-transform: translate(-100%, 0); -moz-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); -o-transform: translate(-100%, 0); transform: translate(-100%, 0); -webkit-transition: -webkit-transform 1s ease-in; /* Changed here */ -moz-transition: -moz-transform 1s ease-in; -o-transition: -o-transform 1s ease-in; transition: transform 1s ease-in; } a:hover + p { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); … Read more