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!
Related
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.
I am doing an animation with ScrollMagic and GreenSock's TimelineMax. The animation is suppose to go in a WordPress page. However the animation has some glitches when the page is open in Chrome. This problem does not occur in Safari and Firefox. I can't test for IE.
This is how the problem looks like:
And this is how it is suppose to look like:
The most bottom part with title Your web site goes up, and the two top parts move down. As I said, it works perfect on Safari and Firefox, but on Chrome you have to scroll up and down to fix the issue. However this is not acceptable for us, since the users of our page wont see the animation properly when they first scroll down.
Here is JSFiddle of the animation. Now, this will most probably work without problems in JSFiddle, but when I put this in WordPress page it looks like on the first image. Does anybody have a clue why this happens?
I found the solution :) I don't want to delete the question, because I hope somebody will find it useful.
The solution is to increase the z-index of all the elements (images, divs, everywhere where I have z-index in the css.). I increased it for 1000 on every element and it worked.
I have a weird rendering glitch on a webpage in google chrome. I reproduced it under Mac Chrome, and Chrome under a parrallels virtual machine in windows.
It's supposed to be a simple draggable div. But, when you drag it around, it looks like this: http://imgur.com/VdY3Tv2
The situation is pretty unusual; it's a container div with a css transform matrix, containing an iframe, with a draggable div.
I created a demo. Just drag the div around: https://www.dropbox.com/s/cjq39w82mghuze2/bug.7z?dl=0
Any idea what causes this?
[edit]
I still have no idea. But: updating the transform matrix of the parent element (in my case, I was using fit.js, and call watching.trigger()) forces a redraw. So, that might be a useful workaround that helps people. :)
I found an actual fix that is not stupid and half-working like my earlier attempt.
iframe {
-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
backface-visibility: hidden;
}
To clarify, to any iframe in which you have this happening, apply the above CSS.
No more glitches. Stupid, I have no idea why it worked, but I just tried random things, and then this worked. I'm guessing it enables some kind of different rendering flow that avoids this bug, whatever it is.
I have a mysterious (at least for me) css background image problem, that I run into only with Google Chrome. I have found similar topics, but unlike those, here no Javascript, JQuery or anything else is involved, it is pure CSS. It's just not working as it should.
If you open up the page www.bodrogietterem.hu, the background image should be below the entire content area (as it is in other browsers). In Chrome a horizontal and vertical white area is appearing.
Once you start scrolling, the background image appears all okay, and it stays there from then on. Similarly, when you open the dev tool with inspect element, the background image is immediately there, and stays there, too.
this is the pertaining css:
body.page-node-1 div#main{
background:#FFFFFF url('/sites/all/themes/bodrogietterem/images/bodrogi_bodrogi.jpg') bottom;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:50% 135px;
padding-bottom:0px;
margin-bottom:0px;
}
and attaching two screengrabs on how it looks like, and how it should look like (well, I'm not allowed to attach these, as a new user, but have a look here:
http://www.bodrogietterem.hu/chrome_issue.JPG
and here
http://www.bodrogietterem.hu/should_look_like.JPG
It happens on sub-pages, too, but I think the root of the problem must be the same.
I'm using Vista, with up to date Chrome (20.0.1132.57), and up to date other browsers. btw, the second screenshot was taken in Chrome, too, but after opening the dev tool
many thanks for your kind help,
bests,
Zsolt
The latest version of Chrome is 21.0... so try updating chrome browser and see if it appears ok in the latest version. The screenshots lead to a 404 error page, so try uploading the screenshots again.
I also checked the page in IE7, IE8, IE9 the page looks good in all 3, IE7 however shows a horizontal scrollbar at bottom but the background image looks ok.
Your page looks fine in Chrome in windows 7 (Chrome 20.0.1132.57)
I have had problems in the past where various toolbars / addons that have been installed interfere with the CSS on a page quite significantly rendering Chrome to appear to bug out in isolated incidents. Try running chrome with no addons / plgins installed and see if it fixes your problem.
One observation on your CSS: #content contains floated elements that aren't cleared. I dont think that's the problem here but could be mixed with the above possibly.
Let me know if that helps at all.
Thanks for your helpful thoughts, I finally managed to resolve the problem.
While fiddling around, I measured the height of the white area, and it turned out to be 135px (which is exactly the top position of the background in the CSS above). So I decided that for whatever reason, that attribute was causing the problem, and I was right.
as a quick and dirty solution, I added 135px of white area to the top of the background image, and set the background-position property's top to 0px - which immediately fixed the issue.
as for the vertical white area, it was resolved by binding the background image to the #main-wrapper div instead of the #main div (it is a Drupal 7 build). Again, I don't exactly know why, but it fixed the problem instantly.
I love, how the web should be precise and logical, and it still stays random and ad hoc at times
thanks again for your time and effort, bests,
Zsolt
Had the same problem with two pages of http://www.stoerbeton.nl but I think I solved it after reading your above posts and some thinking.
The problem was probably in the general background: url; attribute and loading of the website css. I replaced all general background: #222222 url repeat etc.; for background-image:; , background-repeat:; and background-color:; etc.
Please let me know if your website works after editing your css. I'm still testing.
Greets, aquaster.nl
I'm using simplemodal on a website I'm developing. Everything was working fine across all browsers until I added "overflow: auto;" to my simplemodal CSS as such:
#simplemodal-container {height:90%; width:80%; color:#fff; overflow:
auto;}
I get the scrollbars when needed in FF, Safari, and Chrome just fine, but when I look at it in IE8 (haven't tried IE6 or IE7), most if not all of the content of the modal is missing. It appears to be spinning as though it's waiting for the server, but nothing happens.
I've looked everywhere online for an answer to this issue, but haven't been able to find anyone else who's having the same issue.
Please let me know if you need anything else from me.
Thank you in advance!
Pekka, thanks for taking a look. I was sure that it wasn't the javascript, because one of the buttons, (resume) links to a simple html doc with a table and that wasn't even showing up.
But I think I've figured it out!
In the CSS, there were also some opacity settings, which I pretty much copied over from the simplemodal website. But one of the settings was an IE workaround that was throwing errors whenever I validated the page. So about 5 minutes ago, I thought, "hm. I wonder if I get rid of those opacity settings if that might do the trick." I wasn't really using them anyway - I had set the opacity of my modal window to 100%. So I just got rid of the settings, and now it works in IE. Go figure.
On the "images" modal, my thumbnails are getting cut off in IE, so I do have one more thing to figure out, but at least it's showing up now!
HOO-RAY.