I am working with videos and sometimes need to show a short video over a stream. But in Chrome the videos start flickering kind of like underlying video is leaking into the one on the top. I tried position: absolute, transform: translateY(-100%) and grid-area: 1/1/2/2 and the same result is produced in each case. It happens even if there is another non-transparent absolute positioned layer in between the two. It only works when an underlying video is hidden completely using visibility: hidden, display: none or other similar technique.
You can check this StackBlitz to see for yourselves.
It works properly in Firefox but not in Chromium based browsers.
EDIT: it seems that this doesn't happen to everyone and is somehow linked to the hardware acceleration feature in Chrome. When I disable hardware acceleration the flickering stops for me also. Looks like a Chromium bug to me.
Related
I do not know how it has happened, because it worked properly at some point, but after doing some changes, I think to the main scroll container layer of the page, this started happening.
It is a weird visual glitch, I am not able of reproducing it, all that I can say is that the transition is a CSS transition with transform: translateX() and that while the transition is running both elements (new and old) get an absolute position that its remove once the animation ends. Also, there aren't any text-shadows in place.
I does not happen in firefox nor in chrome mobile, and it does not happen always, depends on if I have or not the developer tools opened, I think it might be because of the change in viewport resolution when those are open.
I have this issue as well;
fiddle
Seems it has to do with multiple layers of nested animations.
Its a bit to complicated to outline here!
I'm been having some problems with my site redesign, I have a section of goals in the case study that is sticky and once you pass an image that goal gets crossed as done. As I'm using full-width images I wanted the goals section go underneath and as you see it again when scrolling the goal is already crossed, it works great on chrome and firefox but not in safari. Is weird because when I use the web inspector the element in safari behaves as it should for a moment and it goes under the image.
Does anyone have an idea of what can be?
Example link
adding transform: translate3d(0,0,0); to the non sticky div seems to fix it in Safari
This must be a Safari bug with their implementation of position: sticky
I've reported this as a bug to Apple - maybe do the same?
I have a very strange behaviour only on Chrome. I want to style checkboxes on a filter layer. An example you can find on http://jsfiddle.net/2wpe0unu/
The filter criteria are dynamic and based on a REST call. It works perfect, but with some CSS3-features I'm using the labels cannot be clicked. To demonstrate this I've created a fiddle on http://jsfiddle.net/3oL5tmfp/1/ Open the Layer and try to click the checkbox.
Some thoughts to solve this problem:
label without position: relative; – it works, but the styled checkboxes are lost in space
ul without CSS-columns – it works, but I have no columns ;(
layer without transform: translate3d(0,0,0) – it works, but I do not have any hardware acceleration
The problem occurs only on Chrome (Mac & Windows) and Mobile Chrome (Android & iOS). It works like expected on IE10+, Safari, Mobile Safari and Firefox.
For me I've solved this by avoid transform on the layer (solution 3), but I would like to understand this strange behaviour.
May it's a bug of chrome engine? Any suggestions are welcome.
Ciao
Ralf
on your ul add z-index: 2; and position: relative (to make the z-index work) seems to solve the problem in your fiddle.
Also would recommend adding a clearfix to your content is-open since you say the checkbox list will populate dynamically.
So I have a video playing in the background of a splash page, it is running on a loop with no available controls and I have text and an image sitting on top of it. I set it up as a with z-index: -100.
This works perfectly in Safari and Firefox, but in Chrome and Opera when the page loads everything on top of the video disappears. As soon as I resize the window everything re-appears, but when I refresh it has the same problem.
I'm not really sure what to try at this point or if this is a common problem. Any help would be great, we're trying to launch the site tomorrow.
Edit: Here's a link to the site. I was hoping this was a common enough problem that there would be a well known fix. http://jessemacdesign.com/upload/splash.html
For me, it's working in Chrome and Opera no problem (so check you don't need an update!). However, I wouldn't recommend using negative z-index as there's not really any point in doing so. Try this for your z-index and see if it works:
video#bgvid {
z-index: 1;
}
#bgimg {
z-index: 1;
}
I would also remove the z-index from #main as I don't feel it's needed.
Failing all of the above, try structuring your page differently so your video is in it's own div. I can't recreate your issue myself though, it's working in Chrome and Opera for me.
Original: Any chance of a link? It would be hard for me to help you without viewing the code directly!
I have a page that uses a number of simple animations, including some JavaScript animations that add/remove CSS classes to elements with CSS3 animations for rotations. I am not using canvas.
On the PC, the page looks great in Chrome/Safari, Firefox, and IE, but on Macs, a number of elements are completely missing on the page when it is viewed in WebKit (Chrome, and Safari 5.0.3). It looks fine in Firefox on Mac. The missing elements don't have any animations applied to them -- I don't see any connection between them and the animations.
The page validates, the CSS nearly validates except for the vendor extensions and the zoom property in my clearfix. Disabling all of the JavaScript on the page doesn't change anything. The missing elements are in the source, they are just not visible on the page.
At first glance, it looks like the Z-indexes have gotten screwy on the invisible elements. Changing these doesn't affect the problem though. Removing all of the absolute, relative, fixed positions, as well as floated elements in the entire document doesn't affect the problem. The only action that does anything, is removing all of the Webkit animations.
And when I apply all of the animations, nearly everything on the page disappears!
Here is an example of one of my animations -- simple stuff:
#-webkit-keyframes propeller {
0% {-webkit-transform: rotateX(90deg);}
50% {-webkit-transform: rotateX(1deg);}
100% {-webkit-transform: rotateX(90deg);}
}
#element {
-webkit-animation:propeller 1s linear;
-webkit-transform-origin:50% 50%;
}
Even if the animation is not called, simply the presence of the keyframes causes the page to break.
If I use this animation in particular (just the -webkit- vendor prefix), it causes a large form to vanish that is a sibling of the great-great ancestor of "#element."
Here is a link to the page I'm working on. I had nothing to do with the design:
http://goo.gl/6XXcV
All of the animations are contained in animations.css and all the JavaScript animations are in general.js.
This has been very slow-going for me since I don't have a Mac -- I'm just using Microsoft Expression Web 4 SuperPreview -- but my client has a Mac and is not impressed. Thanks in advance for any advice.
I just pulled up the site in Chrome for mac and Firefox for mac (versions 22.0.1229.94 and 14.0.1 respectively) and aside from a couple spacing differences (which are minor) the look the same. The only odd thing I see is the light blue background showing up next to all the graphics if your window is narrow enough to warrant (the seemingly needless) horizontal scroll.
What exactly is missing?
For the most part, the trouble turned out to be from bugs in Microsoft Expression Web 4 SuperPreview with their Mac/Safari 5.0.3 emulator service. When any -webkit- vendor prefixes are used for CSS3 animations, it causes elements seemingly unrelated to the animations to behave as if they have visibility:hidden.
The similar problems with the disappearing elements first reported by my client using an actual Mac with Chrome seem to be from a bad .svg font conversion that was being used with #font-face. Although the svg font was rendering on Mac/Webkit, it appeared to be destroying styles on elements in which it was used as well as parent elements. When I converted the font once more to svg using a different conversion utility, the problem resolved. Weird.