I've creating html5 & css3 web application now and on.
I'm using Google Chrome for testing platform.
and using css transform3d properties to implementation 3d camera & 3d world in web browser.
not WebGL. (because WebGL can't render HTML Elements directly.)
if it has many divisions(div elements) to draw, chrome can't draw all.
background images & some divisions are lost.
so it turns into white screen.
how can i solve this problem?
I think it is chrome's hardware acceleration bug.
How can i pass through?
Background images do cause issues and flickering when using 3d transform.
Move the image background in one container on which you don't want to apply 3d transforms and then try. Also make sure you have -webkit-backface-visibility: hidden;
Refer this link for more info: Prevent flicker on webkit-transition of webkit-transform
Related
I'm working on a new personal website. For the homepage header I made a soothing waves animation using the colors of my new theme.
Problem: this animation seems to be quite heavy and is jagged/stuttery on lower-end devices like mid-range smartphones and cheap laptops. Not a desirable effect for a homepage or any website for that matter.
Website
The animations are done by animation background-position on the wave elements and subtle movements with css transform animations (translate, rotate).
What I've tried so far:
turning the animation into a lightweight video. Problem: color
reproduction across browsers is a mess. The green on the bottom and
the blue on top needs to match up with the background of the page,
which is impossible to do across all major browsers (I tried using
css filters to correct the differences in color interpretation but
unfortunately this also isn't satisfactory).
Using the will-change css property on the animating elements. This doesn't make a noticible difference but I still leave them in to be sure.
Using a javascript animation library to do the heavy animation lifting, but this produces a similarly heavy result.
Rendering the video to a html5 canvas. This still produces the same color misinterpretation.
Contemplating life and why the world in 2020 is still like this that there's no regulation on color reproduction between browsers and devices. This obviously did not produce a useable result.
Conclusion:
I'm open to any input on making the animations be less recource-intensive, I'd prefer keeping the live-rendering version like it is now, but if there's a solution to the color interpretation issue in html5 I'll gladly switch to using that method as it tends to be the easiest on end-user resources.
I am using HTML 5 canvas for drawing image and drawing annotations on that using paper.js.
I am trying to implement zooming functionality for Canvas. For this I am using scale function for that. As user try to do zoom then first i scale the canvas and then redraw the content.
But suppose if, there is much content on the Canvas, then it make slow to the process. It takes some while to render.
What can I do for this ?? Please suggest me feasible solution.
you can try with WEBGL rendering , WebGL is hardware accelerated so smoother operations than canvas. Three.js library provides webGL rendering option , latest browser version supports it.
I've recently stumbled upon the TurnJS plugin to create a page turning effect. I'm working on a project right now with it to recreate a Flash flipbook that was built in the past. One of the stipulations is that it has to be shrunk or magnified to fill the browser window without scrolling. I've been experimenting with my own simple JS utilizing browser transform properties to scale the container. The scaling is working however the flip book effects don't work very well once everything has been scaled (shaky page transitions and the page corners don't work very well).
I've also been experimenting with without much luck either.
I've also implemented a chart on the second page using Flot and have also noticed that when zoomed, the mouse over are not aligned correctly. It's similar to what's happening with the page corners.
The original flash version: http://www.return-it.ca/ar2010/index.html
Without zooming: http://dev.bitpowered.ca/encorp/
Have I gone about this the wrong way? Is there an alternative to getthing this all to work, or am I SOL on this one? Thanks in advance.
Is there any image modification tool out there that will work on webkit?
Something like the one on this page
http://developer.yahoo.com/yui/examples/imagecropper/simple_crop.html
Except that when you interact, you interact with the image in a given space and the mask is fixed (i.e pinching the image, rotating the image etc)
Thanks,
Tee
The jQuery image crop plugin should work with Webkit and does cropping. I don't know of a free plugin that can do image rotation at the same time.
WebKit supports html5 canvas and canvas supports image manipulation. You could make an app to do this. I recommend looking here
I am trying to recreate a page flipping type animation in HTML5 using canvas. The animation is based on ideas from this page. But that's not really important. The problem I am having is that using the 'source-in' composite operation is not giving me the results I expect and would like clarification as to why. I think it only works on chrome, not working on FF 3.6.
The black rectangle is supposed to act as a 'mask' for the page being turned over. All I want to see is the turning page in the areas where it overlaps the mask. The problem is the entire black rectangle is drawn, not just the area where they overlap.
I know HTML5 isn't really being used yet, I'm just experimenting for my personal site and curiosity. Any ideas would be greatly appreciated.
Canvas Compositing support was broken and might still be incomplete in some browsers.
Compare the images here
with the actual rendering in your browser to see what works in which browser right now.