I have a menu element on the top of the page with
position:fixed;
z-index:1000;
and it normally stays at the top of the page, without any complaining. However, whenever I have a youtube embedded video in the page (also must be playing at the time) it seems, the fixed menu has all sorts of glitches and jumping around. Is this a common issue, embedded videos interfering with position:fixed elements? The issue is in Chrome, Safari, but oddly enough, not in Firefox.
Does this console error have anything to do with it?
Unsafe JavaScript attempt to access frame with URL ww.youtube... from frame with URL ww.youtube... Domains, protocols and ports must match.
I know this description is not very elaborate, so here is the url: Chronicle Video Section. I'm making my high school's school newspaper site, and I'm stumped on this one issue - never seen it before. Try scrolling up and down while the video is playing. Thanks for your help.
The div the iframe is in is:
<div class="entry-content">
<p>
<iframe... />
</p>
</div>
If it helps, how I have it set up is that it currently pulls the entry content of the wordpress post content which is just the youtube url and Wordpress converts the url into an embed into that div.
I found that adding the style rules
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);
to the fixed element sorted out the craziness for me.
I had exactly the same problem and I found a very simple solution. Add the following parameter:
?wmode=transparent
to the youtube video url. For example:
<iframe width="560" height="315" src="http://www.youtube.com/embed/brg1H4BuII8?wmode=transparent&rel=0" frameborder="0" allowfullscreen></iframe>
More details here.
This isn't a YouTube bug. This is a webkit bug related to redrawing of fixed position items. I recommending filing the bug with webkit.
http://www.webkit.org/quality/reporting.html
If you want a work around for now, I would recommend listening to the window scroll event and changing the style of the menu(width, height, or position) to force a redraw.
This is building on #gregdev's answer:
backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform: translateZ(0);
-moz-transform: translateZ(0);
-webkit-transform: translateZ(0);
For complete browser support.
Related
In several tutorial I found that, site title and site description is important for SEO. Even some of 'em uses <h2> for site title and <h1> for site description grab Search Engines' attention into the website matters.
<header>
<div id="logo"><img src="images/logo.png" alt="Logo of the Company" title="Company Title"/></div>
<hgroup>
<h2 id="site-title">Site Title</h2>
<h1 id="site-description">Site Description</h1>
</hgroup>
</header>
OPTION I: But in some web pages, we don't see any site title or description, but a site logo. In that case, designers recommend to use a text-indent to hide them.
#site-title,
#site-description{
text-indent: -9999px;
}
It'll hide the texts by indenting 'em from the visible portion, so then the search engine will crawl 'em and it'd be SEO-friendly. But the problem is, they are taking the space in the header section. To meet-up the space we need to put margin to the following items, and that's not a good solution for me.
OPTION II: Beside that, we can use visibility:hidden
#site-title,
#site-description{
visibility: hidden;
}
I don't know whether it enables the crawler to crawl those texts, but the same problem here too, it's taking the place.
OPTION III: But the only thing useful is display: none and it works like a pure HTML commenting (<!-- commented out -->)
#site-title,
#site-description{
display: none;
}
But truly, it simply vanishes the texts, I think even from the eye of the crawler. So, to me, it's not SEO-friendly.
So, Option I and II is useful with the place-taking problem.
How can I put 'em there for SE-Crawler, but invisible from the eye without taking place?
Using CSS clip Property is a nicely clean and non-conflicting solution to this issue.
h1#site-title,
h2#site-description{
position: absolute;
clip: rect(1px 1px 1px 1px); /* IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
CSS clip Property
The clip CSS property defines what portion of an element is visible. The clip property applies only to elements with position:absolute.
Browser support:
I don't think display:none vanishes your code from the source. It is still present there and the search engines will still crawl them.
Try to inspect the element (Chrome developer tools or Firebug) or view source of your page and you'll see! CSS never affects the kind of HTML rendered on the page! It just affects the way it looks. So, relax and use the display:none property.
So, here I got the correct answer:
https://webmasters.stackexchange.com/questions/1377/how-bad-is-it-to-use-display-none-in-css
We can use display:none; and search engine will crawl it, so no tension with SEO.
But CAUTION: DO NOT USE display: none; FOR SPAMMING. :)
Thank you #akash4eva.
I inserted a youtube embed code (the iframe code) in a webpage, and used css column-count to automatically divide text in the page to two columns.
.newspaper
{
-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari and Chrome */
column-count:2;
}
The problem is when i embed youtube video after the initial viewport it is shown as black image. Here is an example: http://jsfiddle.net/KTvCV/689/. Seems this is bug with youtube and chrome. Is there any solution/fix for this issue?
Tried different things and not working so thinking to go with jQuery columnizer instead of CSS column count.
Trouble Replicating This Problem - Observations
I am seeing very inconsistent behavior with Chrome trying to display iframe embedded videos in a multi-column format.
The following did not seem to clear the problem consistently:
I tried putting <p> tags around the text thinking it might be line
length related quirk.
I tried clearing the cache.
Changing the width of the column
Changing the dimensions of the iframe
In addition, videos below the fold seem not to be rendered (painted?).
Once Case That Works
The only situation that seems to render well is having a single video that appearing in the first column.
I don't know why this is the case.
I had this problem, for me the fix was to give the <iframe> an explicit width in pixels, position: relative, z-index, and a 3d-transform such as transform: translate3d(0, 0, 0).
Experienced in Chrome 43.0.2357.130 (64-bit) for OS X Yosemite 10.10.3
For me, only adding transform: translate3d(0, 0, 0) on my <video> tag worked.
Note: I use a <video> tag, not an embedded <iframe> YouTube video. But I had the same problem with columns.
I can confirm the issue with having a YouTube video combined with column-count. http://codepen.io/djschoone/pen/VYdaOv shows what's happening. The video moves to an other position.
HTML
<html>
<body>
<article class="display-2col">
<p>Text</p>
<p><iframe src="http://www.youtube.com/embed/GUstB3VS4KY?rel=0&autoplay=0&wmode=opaque&controls=0&showinfo=0" width="614" height="370" class="video-filter video-youtube vf-gustb3vs4ky" frameborder="0"> </iframe></p>
</article>
</body>
</html>
CSS
.display-2col{
-moz-column-count:2;
-moz-column-gap:20px;
-webkit-column-count:2;
-webkit-column-gap:20px;
column-count:2;
column-gap:20px;
}
The difference with IE and FF is the video is placed with the tag on Chrome whilst the others get the tag served.
I guess it has something to do with positioning. Looking into it!
I have this "web-site" -> http://www.krlja-ustvari.hr
It works 'perfect' in Google Chrome. By 'perfect' I mean that content is always 100% width and 100% height, overflown stuff is hidden and line breaks are made without <br /> tags. That's exactly what I need.
However, when I look at the same page in Firefox or Internet Explorer (didn't check with other browsers) I can see vertical scroll bar. That's exactly what I don't want.
My question is simple: how to make this page render in all browsers like in Google Chrome?
Thank you very much for any help!
if you do not need scrollbars in the body/document at all
<style type="text/css">
body { overflow:hidden; }
</style>
I believe that if you change the min-height:100% declaration on #content to just height:100%, you should be fine in those other browsers.
That worked when I edited your page in Firebug for FF.
I'm having a problem in Google Chrome. I'm using a simple hover state on a display:block; link to change only the background:url(); property on the hover.
Google Chrome shows the actual hover change ok, but when I mouse out of the area, the background goes transparent/disappears.
Here's my CSS:
#branding #logo a {
width: 259px;
height: 201px;
border:none;
display: block;
background:url(images/logo.png) top left;
}
#branding #logo a:hover {
background:url(images/logo_hover.png) top left;
}
The actual site is here: http://beerblestudy.org. Again this is only happening for me in Chrome. Any thoughts?
It's working for me an all browsers. Try deleting your cache because it's working normally. I recomment you to delete the lines top left since they aren't necessary
Your background is disappearing in chrome here too.
I know I shouldn't "me too" on here, but this is odd and what brought me here was the same problem I'm having on a site I built recently: http://macvillain.com - the right hand column image blocks.
I tested thoroughly on most browsers (not ie6 or 7 - I've banished them) and has been fine in chrome for the past two weeks until today. Sometimes clearing cache etc works for a little while then it comes back. I don't get it...
UPDATE:
Hi I got an answer on the Google Chrome forum which said:
"Chrome uses strictly HTML5. Validate HTML code http://validator.w3.org/"
I had forgotten to do this and there were a couple of invalid things which I fixed and now all is fine and dandy.
I suggest you do the same.
Try this technique: I saw a JQuery plugin that automatically download images specified in CSS style sheets.
http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/
I am having a hard time figuring out why things look so different in IE and Firefox.
Here is a CSS class
.logo { width: 224px; height: 120px; position: relative;
display:block; left: -1px; background-image: url(logo.png);}
In IE this works as expected, but in Firefox it behaves like a drunk! I see 3 logo.png at different places on a page. If I remove display:block then I cannot see the image in either browser.
Any comments appreciated.
You might need to add
background-repeat: none;
to your css class. And for future reference, it's always IE that screws up ;)
EDIT: If that doesn't solve your problem, please put up a sample site live somewhere we can look at it and experiment a little. Also, Firebug might be helpful.
EDIT2: Removed this, since I noted the difference between firebug and the src I got from right-clicking and selecting "View Source..."
EDIT3: Steve found your problem: You can't self-close anchors. Change
<a href="/" id="logo" />
to
Your problem is in the HTML. You can't can't self close A tags
Correct, the problem is always IE. If firefox has an issue it's usually an issue with the w3c specs. Not being a fanboy, it's just the way things are.
I guessing your problem is that the default value for background-repeat is different between the browsers. You should try setting background-repeat:no-repeat EDIT: Maybe not, all browsers default to repeat.
It would be useful to know what element you are applying logo to. Whatever it is is probably collapsing to a height of 0px when not a block. Put a border on it to see what's going on there.