I am using leaflet and openstreetmaps with Wicket (java web mvc). The maps renders fine on Firefox and IE. On google chrome if my div height is 600 the map is visible like a bar on the top 200 px the bottom 400 px is grayed. There are no errors in the browser console. If I drag the map down the map renders the whole 600 px. If I drag the map up the map is grayed the whole 600px.
I cannot really post the code as it is embedded in many js files and we use canvas to draw on the map so there is not a small piece of code that I can put it here.
if you have had similar issue, please let me know how you fixed it.
Thanks in advance
I ended up reloading the page. I used a cookie to set a flag. when the page loads for the first time, I set the cookie and reload. If the cookie is set then do not reload any more.
I do this only if the browser is chrome not otherwise. So far its a little annoying but atleast can see the maps.
Related
I'm having an issue with getting Googlebot to correctly render my webpage(s).
It's rendering the header and one "row" of my page (just the page's top background picture), and then failing to render anything beyond that, not even the footer, missing about 3/4 of the page.
My site is www.runparis.fr and screenshots of the rendered fetch are attached.
Other potentially relevant information includes:
The code that was fetched is missing nothing
The fetch status is complete (no missing resources)
The problem is site-wide; it happens on all my pages
When I check the cache the whole page is rendered perfectly
Fetch as Google (mobile) renders the site perfectly
The site looks fine in any of my browsers
There's nothing funky going on in my page; It's just background images and text. Easy stuff.
My questions are:
Will google's inability to render the page have an impact on how Google ranks it?
Is there any advice for solving the problem and having google render the page correctly?
Thanks for any help or advice anyone can offer!
Googlebot render 2
Edit:
I've done another Fetch as Google and render for a test page and found that Googlebot will stop rendering after it has rendered any background images that I've set to "full height" in my page builder in my Wordpress installation; that is, any image that is set to take up the full height of the browser window kills the render.
So, it will render everything until it hits this image, renders that, and then stops.
As stated before, my page isn't fancy; It's just simple background images and text. It surprises me that Googlebot has trouble rendering what any browser can render perfectly, especially given the simplicity of the pages!!
So, my questions are:
Will Google not being able to render my page impact the way Google ranks my site? (given that what's in the cache renders fine on my browser)
And, Is this a common problem? Are there any fixes that will let Google render my pages correctly?
Some new information supplied by an external source:
"validator.w3.org/nu/?doc=http%3A%2F%2Frunparis.fr%2F"
"jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Frunparis.fr%2F&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en"
The various errors and warnings might explain why rendering is hampered in some tools such as Google Fetch and render.
Browsers are much more forgiving than all these validation and rendering tools.
I'm guessing that in Google's rendering tool the css rules that set the background image(s) and foreground image(s) and text content are being applied in the wrong order so background stuff ends up on top of foreground.
Does this new information help anyone understand why Googlebot would be having trouble to render the page?
I have experienced the same problem, the only viewable thing on the renderer was the hero section, and it was caused with defining height:100vh; for the hero section.This problem occur when using vh css units, or in some cases height:100%;
Here is the thread and discussion that really helped me out to understand the issue:
I believe that the google bot is doing this:
1. Looking at your website with a 1024x768 viewport.
2. Checks how tall the window.scrollHeight is
3. Resizes it's virtual browser to be the same height as the window.scrollHeight
4. Takes a screenshot and
5. Checks to see what elements are visible, and tallies SE score as appropriate. (Dinging content that is not visible.)
I partially solved this issue with inserting extra rules into mediaqueries: So for resolutions around 1024px width, I put max-height:800px; (rule height:100vh; stayed active) on my hero section, and on mediaquery for rules around 1280px width and up, I set max-height:none; (rule height:100vh; is active).
I'm still loosing around 30px of height in the renderer, but that's being cut off at the end of the page, with no text and any meaningfull content.
I have the similar issue with (Google Mobile-Friendly) tool and (Fetch as Google) mobile version is broken because Googlebot is not loading my style.css and affect my rankings
so I output my stlye.css code for mobile manually
add_action('wp_head','load_mobile_styles');
function load_mobile_styles () {
if( wp_is_mobile() )
{
ob_start(); ?>
<style>
enter code here
</style>
<style>
enter code here
</style>
<?php
echo ob_ob_get_clean();
}
}
I have created a website using Adobe Muse and have uploaded the site to the ftp server . The website is live and is as designed when looked via a desktop. But when the same site is being viewed from a mobile, the entire page is getting left aligned and there is a gap to the right side. I even made a phone layout and uploaded the same to the ftp server and the problem still persists. Ive googled a lot and inserted html code into the metadata to make the site centered but in vain. Nothing works . I have a tight deadline and would really be grateful for any quick help.
maybe your images are placed in pixels... If I am right
try using a rectangular tool... fill it with image then make the width 100%
to view the sample image click here
The size of mobile layout in muse is fix... I think the mobile you are using have different size... so just start using % on placing the images like the background etc.
There's a setting that was causing my content to be left-aligned in the phone layout.
Click Page > Page Properties
There's an un-marked button to the far right of Padding - click this and set it to centered. By default it is left-aligned.
My Facebook app (iframe / fluid / Fluid) shows a horizontal scrollbar. All attempts to remove it have failed.
I've tried all the solutions posted here, regarding FB.setAutoGrow(), FB.setSize(), etc... with no luck, but I found something interesting:
The scrollbars that appear are not related to my application, but related to the commercials at the side.
In the image you can see what I'm talking about:
To the left is a portion of my Iframe App. While the Iframe has been correctly resized (I've checked with Firebug - right) and their sizes are all right, there's that horizontal scrollbar at the bottom that affects the whole facebook window (not just my iframe).
The highlighted item on Firebug is what causes the horizontal scrollbar. They don't belong to the pagelet div (the div where the iframe resides): It's part of the carousel of recommended games to the right ! (and its width is > 5000 pixels).
When I first launch my app, there are no scrollbars fora little time interval, like 500ms, then they suddenly appear.
FB.Canvas.setSize , FB.Canvas.setAutoGrow seem to work, if I invoke them manually, they do resize the iframe, etc. but they don't remove the scrollbar.
I have body:overflow=hidden.
(may be related?) My app uses itself another iframe, width and height 100%, that is where the action takes place. That other iframe also has overflow=hidden.
This has traditionally worked. I stopped paying attention to Facebook for a couple months, then I saw this yesterday :(
What can be happening? My guess is somehow Facebook thinks my app needs horizontal scrolling, removes overflow-x:hidden in the main body in order to allow it, but this intererferes with their carousel that expects a hidden overflow... I don't know if this problem is at all my fault or a Facebook Bug.
Fortunately, this bug has been solved by Facebook. Everything is working now.
I've got a Facebook App that I've created. I want it to be 760 px. wide however it seems to be stuck at 520 px. When I view the source generated by Facebook I see this.
<-- <iframe name="app_runner_fb_https4fa04becb1d045950954937" id="app_runner_fb_https4fa04becb1d045950954937" style="width:520px;height:800px;" frameborder="0" src="https://s-static.ak.facebook.com/platform/page_proxy.php?v=4#app_runner_fb_https4fa04becb1d045950954937"></iframe> -->
That seems to indicate that it is using 520. Yet, the settings seem correct in the Advanced Developer panel.
Using Google I see a bunch of reported problems from years ago with 760 px; however, the option is still in the settings. Does this option work? Recently Facebook moved pages to timeline which freed up the left nav-bar. My app looks stupid without that space taken. It sits in the center of the page with 100+ white pixels on each side.
That screenshot is a setting for the width of your canvas app (apps.facebook.com/something), and the options are fixed to 760 or fluid width (which is dependent on your own CSS too, of course)
However in your post you mentioned Timeline and Pages, which implies your app is a page tab app accessed as a tab on a Facebook page.
If that's the case, the width setting which applies isn't there, it's under Page Tab on the front page of App settings and can be set to either 520px or 810px
I've a really really weird bug in production.
For some customers and some setups (this can happen on a Linux and a Windows box), our GWT application doesn't render in full (there are a widgets that are missing). The weird thing is that if we ask our customers to start the JavaScript debugger (CTRL-SHIFT-J on Windows), the content displays. Viewing using another browser (like FF) works.
We've been banging our heads bloody a few days now... any ideas?
Sounds like a problem with the height of the component containing your logs objects. Did you try to set a fixed height in pixel? I assume once you open the debugger window, Chrome is forced to render the page again and adjusts the height of the container, so your elements become visible.