I have been developing a website and I have had no problems at all with it. I am now testing it on different PC's and am having a problem where the rendering breaks in google chrome. The pc's all run the same versions of chrome which is version 21.0.1180.89. On some pc's the page renders perfectly and on others, the position: fixed property is completely ignored and me page header disappears when scrolling. On inspecting the element with the chomr developer tools it says the element is there but the element is not visible. It is not a problem with z-index since I set this really high and did not fix it.
Where do I even start to look for a reason for this problem? Is this a css issue or an issue with the browser?
Thanks in advance
Edit:
The solution was found. I had set opacity: 0.99 on the body element of the document in an attempt to fix a problem with fonts displaying incorrectly on Mac's. This should be a valid css property? However it seems that on some browsers this caused the page to reder incorrectly.
The solution was found. I had set opacity: 0.99 on the body element of the document in an attempt to fix a problem with fonts displaying incorrectly on Mac's. This should be a valid css property? However it seems that on some browsers this caused the page to reder incorrectly.
Related
First, I've seen the duplicates
What is #shadow-root, and why does it put display none on my font awesome classes?
and
HTML / CSS - DIV Element hidden when it shouldn't be?
however both of these suggest the issue is with adblock and I have totally disabled adblock.
I am more concerned with where the #shadow-root is coming from, since I certainly did not put it there.
I have read that there is an option in chrome to disable it (and interestingly enough I have it disabled...), but this means that anyone using my website will need to do the same, and I'd rather just do away with it entirely as it provides zero usefulness in my application.
I have also googled and read many of articles about the shadow dom and none of them give any insight on why it would appear seemingly for no reason.
From what I have seen in inspector/view page source, the entire contents of my app are being rendered into this shadow dom and thereby not receiving any of my styles.
I am using rails, react, redux, react-redux, react-router
Chrome developer tool screen
Page Source screen
Notice that the source has nothing in the div that react should be rendering to.
Additional info:
displays unstyled page on chrome in normal and incognito
does not work at all in safari
A lot of chrome plugins automatically create this shadow root in your inspector. For example, ever since I downloaded Vimium, I've had a shadowroot div at the bottom of any page I've opened in chrome. It's nothing to worry about.
I was having the same issue and found that it was Adblock Plus that was adding #shadow-root. Thanks to the resources above I was able to assertain what the issue
For me it was also an Adblocker (uBlock) and it was actually hiding part of the webpage I was making which showed imported tweets. Turning the adblocker off for my site fixed it.
I'm trying to use the position fixed css on a simple one page website with vertical scrolling but am facing problems with IE9, it's like it's ignoring the fixed property, you can see the website here
http://cairocubicles.com/sandbox/mahaly-iphone/
looks right on chrome, firefox.
Appreciate the help.
Yehia
Try adding a doctype to make sure IE9 isn't going into quirks.
This took me a while to figure out.
I was writing some javascript using which contained code to write to console.log. Never noticed it was a problem as i never use IE and nothing appeared to be broken in FF or chrome. I had the js above my declaration and that was what was causing the error. you shouldnt put anything browser side before that declaration.
I've ran into a snag I've been working on for a couple days and can't seem to come up with an answer online. The site template I'm working on now is located at "http://citylakersbaseball.org/2.0" - I've got a div named "sponsors" that shows up fine in Chrome and the built in Live View of Dreamweaver CS5 - however, in Firefox 3.6 & 4beta it completely vanishes. I can see it in the view source, yet firebug has it grayed out. Maybe it's a DOM issue? (for which I don't know much about). Rendering engine issue?
I ran the source (index,htm) and CSS (style.css/nav.css) through the HTML validator - HTML is fine, and the CSS didn't spit back anything I would think could effect the div's display, especially since Webkit has no issues with it.
Any thoughts would be appreciated. Thanks in advance!
Your ad-blocking Firefox plugin is detecting and removing the div from the DOM. I experienced the same behaviour in Chrome and Firefox (which have ad-blocking plugins/extensions), but not in Safari or IE (which don't); and, indeed, the div appears if I disable Adblock Plus. One of the more basic rules Adblock Plus and the like follow is to look for HTML elements with class="sponsors" or id="sponsors" and remove them.
I'm trying to figure out why the front page of my blog (http://www.ulblog.org) renders differently between Google Chrome and FireFox. It appears 'broken' in Google Chrome, but renders without issues in FireFox.
Other pages on the site, however, appear to render fine in both (stack overflow apparently will only allow me to include one link, so unable to provide link to a working page).
Any help appreciated!
On line 238 you have <p> </p. It should be <p> </p> (i.e. you're missing an end angle bracket.)
(seems broken in my Firefox 3.6)
Replace the margin-left on your #sidebar with a float: left.
Remove the sidebar div from #maincontent and place it below it rather than within it.
This should fix most of your Chrome related issues (and FF for me).
Oh. As stated by #Kieran, try validating your code.
Has anybody else encountered this. Whenever the images are intially loaded by the browser it only shows the last-half of the image. Then when I mouse over anywhere in the green section it immediately displays the rest of the image.
What you're seeing here is a <div> with a background-image and a <img> located within said <div>.
I'm encountering this issue using Safari 3.2.3 for Windows and my colleagues have seen this using the Mac version. None of the other browsers I have tested this in seem to show the same bug. I've tested in IE8, IE7, IE6, FF3, Chrome, and Opera.
Let me know if you've heard of any fixes. Thanks.
Safari Image Bug http://www.pixelwhiskey.com/images/safari_image_bug.jpg
Try using PNGs instead if GIFS
I've seen issues similar to this with IE rendering solved by setting height: 1% to the affected div or to an element nested within it. I've never seen it in Safari though.
Inspect all of the elements near the image in Firebug (yes, I know the problem is in Safari) and make sure none of them has the wrong size for any reason, and none of them has excessive padding that encroaches the image you're not seeing correctly. Also, try setting overflow: visible; on the style for various elements in the vicinity; I've seen mouseover flickers in the past, but nothing that couldn't be overcome with CSS.