I am using the basic jQuery UI Slider for an audio player. I am using basic CSS to style the handle of the UI Slider and I have noticed that in Firefox, and ONLY in Firefox, there are some chunks of the graphic that I am using for the handle's background have been digitally removed. These glitches appear and disappear during the course of the playback as the handle moves along the slider, but like I said, this ONLY occurs in Firefox.
I have changed out the graphic from PNG to JPG, but I get the same results.
Has anyone else had this same issue?
Example of Glitch
What the handle SHOULD look like
Related
I want to write an app based on JavaScript that enables users to drag&drop images on a site into a <canvas>. There is a code example here and it's working quite well - with a mouse. The same effect doesn't work when I use a stylus or digital pen as an input device. Adding "-webkit-user-drag" property or "draggable" attribute to the image didn't help.
How can I achieve this (I'm using either Chrome or Edge)?
I'm developing a BI dashboard for a business app using the JavaScript Kendo UI version v2014.1.416, but I'm having a problem with some visuals in IE11.
I want to point out that due to real-world constraints, running IE11 is for all intents and purposes set in stone. The Kendo version number is somewhat easier to deal with, but still no picnic.
Specifically, I use the kendo.fx.flip() function to display a flip card. The card flips ok, but the "back of the card" is rendered before the flip animation starts. In contrast, the same effect in Chrome and Firefox plays out as it should, i.e., the back is shown halfway(-ish) through the animation.
I had a look at the API reference page for the flip effect, at http://docs.telerik.com/kendo-ui/api/javascript/effects/flip. As it turns out, the reference page example exhibits the same behavior in IE11.
I'm guessing the effect uses the CSS3 flip function under the hood (haven't looked yet though) and this seems to be somewhat of a general problem given the amount of questions regarding flip in IE.
My question is twofold:
1) Is there a way to "fix" the animation specifically for IE, using the provided version of Kendo and/or using regular CSS?
2) Is this effect fixed for IE in later Kendo versions, in spite of the behavior on the API reference page?
I could only get this to look nice by setting a large no-repeat fixed background image on both 'sides' (made out of a simple white png).
While attempting to make a game using Canvas I noticed a few quirks on tablet / phone browsers.
1) How do I disable the Canvas from being selectable? It seems like when the user touches it, it highlights the canvas, and almost makes an attempt to select it. This is undesired.
2) Browser slide gestures. Some browser have slide gestures that override any movement capturing done in the canvas or webpage. This is extremely annoying and undesired as well.
3) Canvas control with HTML UI elements. I noticed when there is a canvas present with fellow ui elements (such as text) sometimes clicking or dragging in the canvas will highlight a part of the HTML and instead drags the HTML elements instead of hitting the canvas.
Any help is greatly appreciated! I was hoping HTML5 would be mature enough to allow for good compatibility on mobile as well as desktop. The idea is to be able to code once and play everywhere....thanks!
This should fix your issues relating to #1 and #3:
canvas.addEventListener('selectstart', function(e) { e.preventDefault(); return false; }, false);
#2 seems like an awfully separate question, but I've never had a problem with slide gestures overriding any of my canvas stuff. Try using e.preventDefault(); at the beginning of your touch events.
I'm developing a personal website, http://www.miketurley.com.
In any Webkit browser (Chrome, Safari) or Firefox, when you mouse-over the text on my site's opening screen, you get a slick animation which slides the text around and reveals the menu ("waking up" my website.) This may not be too necessary, but I like it and I think it's appropriate to showcase skills like that on my portfolio website.
Anyway, if you go to my website in Internet Explorer, the animations do not appear at all. The same duration of time goes by, and then the page "snaps" into the post-animation state in one frame, with no motion in between.
How can I fix this?
An explanation of this particular animation along with source code is available here: http://www.miketurley.com/index_explain.html
Leaving eval aside, you site is failing to quirks mode in IE. Using dev tools I switched to different Document Mode and the animations ran just nice. Can't find out what activates quirks right now but you have an issue to investigate. Start with passing the strict validation or moving to transitional or html5 <!doctype html>
I am working on an animated, interactive graph using raphael that I need to work well on the iPhone. I have 2 minor rendering issues that I'm struggling with.
The first is that whenever you click on an svg element that has a click handler attached, mobile safari draws a transparent gray box around it to indicate what was clicked. It's the same thing it does when you click on a hyperlink. The gray box is very ugly in this situation. Is there any css property to tell mobile safari not to do that?
The second issue is with animations. For the duration of any animation, mobile safari adds an ugly black border to the svg canvas. It's only visible while an animation is in progress, and it is only visible on the bottom & right edges of the canvas. Any idea how to fix this?
This was taken using a copy & paste of one of the demos on raphael's page, just with a white background.
This article has some useful tips, namely...
Disabling the selection flash:
Turns out there is a way to turn this off through the use of the WebKit CSS property -webkit-tap-highlight-color, and setting the alpha of the color to 0, in my Javascript code does the trick:
document.documentElement.style.webkitTapHighlightColor = "rgba(0,0,0,0)";
and Disabling the "action" pop-up:
The second thing I needed to disable is the “action” popup that appears if you tap and hold the contents of the UIWebView for a few seconds. This is also controlled through a CSS property called -webkit-touch-callout, and setting that to “none” in this case does the trick:
document.documentElement.style.webkitTouchCallout = "none";