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
Inspect the element you are interested in seeing the style of the scroll bar and go to the bottom of the “Styles” section. You will find the definitions of the pseudo elements
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
WebKit now supports the CSS directive: image-rendering:-webkit-optimize-contrast; You can see it working in action using Chrome and the last image on this page: http://phrogz.net/tmp/canvas_image_zoom.html The rules used on that page are: .pixelated { image-rendering:optimizeSpeed; /* Legal fallback */ image-rendering:-moz-crisp-edges; /* Firefox */ image-rendering:-o-crisp-edges; /* Opera */ image-rendering:-webkit-optimize-contrast; /* Safari */ image-rendering:optimize-contrast; /* CSS3 Proposed */ … Read more
Having run into the same problem, I never found any solution except to add the WKWebView to the view hierarchy and move it offscreen with AutoLayout. Fortunately, this workaround does work reliably.
Just put this -webkit-transform:rotateY(0deg);, you need to tell the browser which is the front face first.
Here is an example that works: ::-webkit-scrollbar { height: 12px; width: 12px; background: #000; } ::-webkit-scrollbar-thumb { background: #393812; -webkit-border-radius: 1ex; -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75); } ::-webkit-scrollbar-corner { background: #000; } Or you can use jScrollPane.
I had the same exact issue. Adding this to the parent container solved it for me (this is a LESS mixin). .transitionfix() { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0) }