webkit

CSS endless rotation animation

by

@-webkit-keyframes rotating /* Safari and Chrome */ { from { -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotating { from { -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); … Read more

What are -moz- and -webkit-? [duplicate]

by

These are the vendor-prefixed properties offered by the relevant rendering engines (-webkit for Chrome, Safari; -moz for Firefox, -o for Opera, -ms for Internet Explorer). Typically they’re used to implement new, or proprietary CSS features, prior to final clarification/definition by the W3. This allows properties to be set specific to each individual browser/rendering engine in … Read more

Detect rotation of Android phone in the browser with JavaScript

by

The actual behavior across different devices is inconsistent. The resize and orientationChange events can fire in a different sequence with varying frequency. Also, some values (e.g. screen.width and window.orientation) don’t always change when you expect. Avoid screen.width — it doesn’t change when rotating in iOS. The reliable approach is to listen to both resize and … Read more

Video auto play is not working in Safari and Chrome desktop browser

by

The best fix I could get was adding this code just after the </video> <script> document.getElementById(‘vid’).play(); </script> …not pretty but somehow works. UPDATE Recently many browsers can only autoplay the videos with sound off, so you’ll need to add muted attribute to the video tag too <video autoplay muted> … </video>

How can I force WebKit to redraw/repaint to propagate style changes?

by

I found some complicated suggestions and many simple ones that didn’t work, but a comment to one of them by Vasil Dinkov provided a simple solution to force a redraw/repaint that works just fine: sel.style.display=’none’; sel.offsetHeight; // no need to store this anywhere, the reference is enough sel.style.display=”; I’ll let someone else comment if it … Read more

Get the real width and height of an image with JavaScript? (in Safari/Chrome)

by

Webkit browsers set the height and width property after the image is loaded. Instead of using timeouts, I’d recommend using an image’s onload event. Here’s a quick example: var img = $(“img”)[0]; // Get my img elem var pic_real_width, pic_real_height; $(“<img/>”) // Make in memory copy of image to avoid css issues .attr(“src”, $(img).attr(“src”)) .load(function() … Read more

JavaScript: Is there a way to get Chrome to break on all errors?

by

I got trouble to get it so I post pictures showing different options: Chrome 101.0.4951.64 [27 May 2022] Very similar UI since at least Chrome 38.0.2125.111 [11 December 2014] In tab Sources : When button is activated, you can Pause On Caught Exceptions with the checkbox below: Previous versions Chrome 32.0.1700.102 [03 feb 2014] Chrome … Read more

Chrome / Safari not filling 100% height of flex parent

by

Solution Use nested flex containers. Get rid of percentage heights. Get rid of table properties. Get rid of vertical-align. Avoid absolute positioning. Just stick with flexbox all the way through. Apply display: flex to the flex item (.item), making it a flex container. This automatically sets align-items: stretch, which tells the child (.item-inner) to expand … Read more

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)