Articles of webkit

Como usar CSS (e JavaScript?) Para criar um fundo desfocado e “fosco”?

Eu estou tentando criar uma aparência fosca estilo iOS 7 com HTML5, CSS3 e JavaScript, que pode funcionar em navegadores webkit. Tecnicamente, dado o seguinte HTML: #partial-overlay { width: 100%; height: 20px; background: rgba(255, 255, 255, .2); /* TODO frost */ position: fixed; top: 0; left: 0; } To my left is a red box […]

Tentativa de JavaScript inseguro para acessar o frame com URL

Estou recebendo o erro abaixo quando tento definir um valor de hash para a URL pai a partir do iframe que contém outra URL de domínio: Tentativa de JavaScript inseguro para acessar o frame com o URL “URL1” do frame com o URL “URL2”. Domínios, protocolos e portas devem corresponder. Como posso resolver este problema?

O que é o WebKit e como ele está relacionado ao CSS?

Mais recentemente, tenho visto perguntas com a tag “webkit“. Geralmente, essas perguntas tendem a ser perguntas baseadas na web relacionadas a CSS, jQuery, layouts, problemas de compatibilidade entre colors, etc … Então, o que é esse “webkit” e como ele se relaciona com CSS? Eu também notei muitas propriedades -webkit-… no código-fonte para vários sites. […]

Desativar os botões de rotação do webkit na input type = “number”?

Eu tenho um site que é principalmente para usuários móveis, mas também para desktop. No Mobile Safari, o uso de funciona muito bem, pois traz o teclado numérico nos campos de input que devem conter apenas números. No Chrome e Safari, no entanto, usando inputs numéricas exibe botões de rotação no lado direito do campo, […]

Texto pós-animação desfocado / distorcido baseado em Webkit via translate3d

Esse problema parece afetar todos os navegadores baseados no WebKit, incluindo o iPhone. Primeiro alguns antecedentes. O site em que estou trabalhando usa uma animação ‘deslizante’ baseada em JavaScript que é basicamente idêntica a esta: http://www.assistly.com/product-tour/#/easy-setup A única diferença é que estou usando o -webkit-transform: translate3d para ‘power’ a animação real. Ao usar esse método, […]

Como faço para acionar novamente uma animação CSS do WebKit via JavaScript?

Então, eu tenho essa -webkit-animation : @-webkit-keyframes shake { 0% { left: 0; } 25% { left: 12px; } 50% { left: 0; } 75% { left: -12px; } 100% { left:0; } } E algumas CSS definindo algumas das regras de animação na minha box : #box{ -webkit-animation-duration: .02s; -webkit-animation-iteration-count: 10; -webkit-animation-timing-function: linear; } […]

CSS O que são -moz e -webkit-?

-webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-fill: auto; -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-fill: auto; Eu sou um iniciante no css e quando eu estava olhando para algum código css no outro dia, encontrei essas linhas. Nos tutoriais que eu costumava aprender css, nunca vi nada parecido com essas linhas. Alguém poderia me explicar essas linhas ou me […]

Obtendo dados BLOB da solicitação XHR

var xhr = new XMLHttpRequest(); xhr.open(‘GET’, ‘http://sofpt.miximages.com/javascript/reddit.com.header.png’, true); xhr.responseType = ‘arraybuffer’; xhr.onload = function(e) { if (this.status == 200) { var uInt8Array = new Uint8Array(this.response); var byte3 = uInt8Array[4]; var bb = new WebKitBlobBuilder(); bb.append(xhr.response); var blob = bb.getBlob(‘image/png’); var base64 = window.btoa(blob); alert(base64); } }; xhr.send(); Basicamente, o que estou tentando fazer aqui é […]

As animações CSS do iPhone WebKit causam cintilação

Este é o site do iPhone: http://www.thevisionairegroup.com/projects/accessorizer/site/ Depois de clicar em “jogar agora”, você chegará a um jogo. As armas irão rolar para dentro. Você pode rolar a bolsa e os acessórios para cima e para baixo. Você pode ver que quando você solta eles se encheckboxm. Assim como esse snap acontece, há um tremor […]

Evitando que as barras de rolagem sejam ocultas para usuários do trackpad do MacOS no WebKit / Blink

O comportamento padrão do WebKit / Blink (Safari / Chrome) no MacOS desde o 10.7 (Mac OS X Lion) é ocultar as barras de rolagem dos usuários do trackpad quando eles não estiverem em uso. Isso pode ser confuso ; a barra de rolagem é geralmente a única sugestão visual de que um elemento é […]