I'm in the middle of working on a website, and the homepage is a jquery-based carousel that I took from here and modified heavily for the specific way I needed it to look for the site. The problem is, I've had to manually define the positions of each carousel item to center them properly around a circular background for every screen resolution that the site is viewed on in the CSS, like this:
#media (device-width: 1680px) {
.flipster-carousel .flip-past {
-webkit-transform: translateX(-22%) translateY(-15%) translateZ(0) scale(0.30);
-moz-transform: translateX(-22%) translateY(-15%) translateZ(0) scale(0.30);
-o-transform: translateX(-22%) translateY(-15%) translateZ(0) scale(0.30);
-ms-transform: translateX(-22%) translateY(-15%) translateZ(0) scale(0.30);
transform: translateX(-22%) translateY(-15%) translateZ(0) scale(0.30);
}
}
I can tell that this definitely isn't the best way to do this, and it's a very hacky method. The big problem that I've discovered with doing it this way is that if the browser window on the computer isn't full screen, the carousel elements will be shifted and off center from the rest of the site. I absolutely have to fix this so that the carousel will stay centered with the rest of the page when the browser window is resized, but I don't even know where to begin with coding that. Can someone point me in the right direction or give me some advice for what to do? The site I'm working on is located here. Thanks!
margin-left/right:auto fixed it.
I'm trying to get the fullPage.js (https://github.com/alvarotrigo/fullPage.js) on my site but when I slide down one and slide back up, the div on the video element is like disappearing and not sliding back with the video nicely, just pop, and appears. As far as I see it works well in Firefox.
Demo: http://beta.brainfunkers.co
Any ideas on this?
Thanks in advance!
That's a webkit bug as you can see here, so the problem its in Chrome.
Anyway, to solve it add the following style for your logo:
.topImage .topImageContainer .bfLogo{
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
The following display issues occurs in Chrome (Version 39.0.2171.95 dev-m)
It has been observed on several Windows PCs and on a Mac.
There seems to be two culprits which can cause this, a slideshow component using Slick.js and a flash animation. I have updated Slick.js to no avail.
The content display will cut off at the same place regardless of where the component is positioned. The position appears to be fixed from the top of the page, not relative to the size of the browser.
The hidden content below will appear in blocks as you move your mouse over the area. Resizing the browsers or highlighting the text on the page will also clear it.
Whilst the bug is still live you can view it here
http://sci.esa.int
Any thoughts?
If I break slick.js by removing the js - then the Twitter component does not cause the bug.
If I remove the flash or the twitter component from the page, the bug does not occur.
I found a resolution
html{
-webkit-transform: translate3d(0, 0, 0);
}
As per another comment though I have added this code
html *:not(svg) {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0); /*only in IE10*/
}
Chrome redraw issue
Although another comment suggests it can have drawbacks
I'm getting tired to trying to rotate the column text from a table in html.
This is what I have, it just works in chrome and Firefox, but not in IE9.
http://contoso2.azurewebsites.net/scores/listscores
I was seeing these examples about the vertical text. I'm using IE9 and it looks good, I supposed they are using something like a canvas, I really not sure.
http://jsfiddle.net/R4JvP/11/
http://www.ok-soft-gmbh.com/jqGrid/CheckboxesWithVerticalHeaders1.htm
The second link is what I'm interested show all the header columns in rotation: (-90)deg How can I implement this in all browsers?
You could use -ms-transform: rotate(-45deg);
-moz-transform: rotate Firefox 4+
-webkit-transform: rotate Safari 5+, Chrome 10+
-ms-transform: rotate Internet Exlorer 9+
transform: rotate
I'm developing an app for the iPad using HTML5/CSS3. I'm not using any framework and am just using whatever is natively supported on the device. I have created some css3 animations to emulate the typical iOS sliding left or sliding right when navigating between screens. Here's an example of the slide left animation which is taking advantage of the iPad's CSS3 hardware acceleration: (the ipad is running 4.2).
/*************************************************
Slide Left
*************************************************/
.screen.slideleft{
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: ease-in-out;
}
.screen.slideleft.outgoing{
z-index: 50 !important;
-webkit-animation-name: slideleft-outgoing;
}
.screen.slideleft.incoming{
z-index: 100 !important;
-webkit-animation-name: slideleft-incoming;
}
#-webkit-keyframes slideleft-outgoing{
from { -webkit-transform: translate3d(0%,0,0); }
to { -webkit-transform: translate3d(-100%,0,0); }
}
#-webkit-keyframes slideleft-incoming{
from { -webkit-transform: translate3d(100%,0,0); }
to { -webkit-transform: translate3d(0%,0,0); }
}
I also have this CSS which I've attempted to use to fix the flicker:
.incoming,
.outgoing{
display: block !important;
-webkit-backface-visibility: hidden;
}
This works great until the iPad keyboard is used. After which point all the animations flicker severely.
I've been looking for examples of an iPad HTML5 app that uses the keyboard and doesn't have flickers afterwards, but haven't turned up much. The jqTouch demos exhibit the same behavior on the iPad (although I know they were designed for the iPhone).
I've turned up a few posts/questions of similar questions but have never found a good answer. I've been through http://css3animator.com/2010/12/fight-the-flicker-making-your-css3-animation-bomb-proof/ and the articles linked there but haven't had any success.
Any other suggestions?
Update 1/13 # 9am
I've added this css and it helped a lot:
.incoming *,
.outgoing *{
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0); /* This helps with the flicker a lot. */
}
The foreground elements don't seem to flicker anymore, but the backgrounds still do. Still looking for some help or helpful resources on Mobile Safari's memory handling tactics.
Update 1/16 # 11pm
Increasing the z-index as suggested by anonymous. Didn't seem to make a difference.
Update 1/17 # 8:30am
I've posted a demo of the problem here.
The transitions between screens work great...until you tap/click inside one of the form fields. After the keyboard slides up and returns, all the transitions flicker. Go to the URL inside the iOS simulator or on an actual iPad to see what I'm talking about.
This is an old question, but I thought I'd share my experience.
I've been having issues with outrageous flickering (on css3 animations) on the iPad (as well as the iPhone, but in that case only in portrait view). I was able to completely resolve all of the flickering issues by setting :
-webkit-perspective: 0;
On the elements being animated. I'm not sure why this works, but it does (tested on iOS 4.2+, both iPad (1 and 2) and iPhone 4).
Update: I've just become aware of an issue with Chrome when setting the value of that attribute to 1. It works just fine when it's 0, so I've updated the above appropriately.
Looking at your source, the translate3d(0,0,0) isn't applied until the transition starts?
Try
.screen{
-webkit-transform: translate3d(0,0,0);
}
or
.screen *, .screen{
-webkit-transform: translate3d(0,0,0);
}
The flicker is probably the hardware acceleration kicking in (it currently only works on 3d translated elements).
I had the same issue, but i was able to reduce the flicker to almost unnoticeable by applying the fix described here and here:
http://code.google.com/p/jqtouch/issues/detail?id=301
https://github.com/senchalabs/jQTouch/issues/issue/130
Basically set the z-index of the page you a are moving out to -1 and after the transistion back to 1
I know this is a dinosaur old question, but there is a solution for this issue and it is quite lightweight and very simple.
document.getElementById('clicked_input').addEventListener('focus', function(e){
e.stopPropagation();
},false);
When i was tackling this issue too, I thought I tried everything - eventually the only thing that helped, was to create a modal window (position: absolute) outside of the app's container div, and also set the app's container div to display:false; when the keyboard was coming up. While it worked it was ugly, I tested everything to see what caused the event and it seemed that when the 'focus event' bubbled up, every 3d transform gets messed up (in flickering and performance).
Preventing the event of bubbling solved this issue completely - quite mind boggling that such a hated bug had such a simple solution?
You're not going to like me saying this, but JavaScript may be the answer you're looking for. I fear that when you bring the keyboard up, the process of rendering the HTML loses priority. With a continually updating script, like a setInterval loop, the iPad will have no choice but to render as planned. Explicit code requires no hacks.
I agree with Ben, you should probably set transforms on the classes themselves as well:
/*************************************************
Slide Left
*************************************************/
.screen.slideleft{
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: ease-in-out;
-webkit-transform: translate3d(0,0,0);
}
.screen.slideleft.outgoing{
z-index: 50 !important;
-webkit-animation-name: slideleft-outgoing;
-webkit-transform: translate3d(-100%,0,0);
}
.screen.slideleft.incoming{
z-index: 100 !important;
-webkit-animation-name: slideleft-incoming;
-webkit-transform: translate3d(0,0,0);
}
#-webkit-keyframes slideleft-outgoing{
from { -webkit-transform: translate3d(0,0,0); }
to { -webkit-transform: translate3d(-100%,0,0); }
}
#-webkit-keyframes slideleft-incoming{
from { -webkit-transform: translate3d(100%,0,0); }
to { -webkit-transform: translate3d(0,0,0); }
}
If that doesn't work, I'd be curious to test if only translating the X with translateX(-100%) fixes the problem. (Not necessarily a fix, because you don't have hardware acceleration without 3D transforms, but would help narrow down the problem.)
Ultimately, there really wasn't a fix for this issue. It seems like form elements in WebKit on the iPad cause problems with flickering.
My workaround was that on the onblur of each form element, I refreshed the page using hash tags to ensure it refreshed to the exact same state. It still caused a "flicker" while it was refreshing, but it did keep the screen from flickering throughout the rest of the app.
I've recently been having the same problem and tried all sorts of complicated fixes. In the end I found the issue was down to the default styling on the input. I fixed my problem by adding the css input{outline:none}. It's prob just on the focus state so input:focus{outline:none;} should work.