I recently updated my website to the latest version of Wordpress (3.1) and noticed a black bar at the top of the page when using Chrome. It's not present in Firefox or Internet Explorer 8, so I'm not sure what the issue is or where to look.
Screenshot of said issue.
See it live here.
that'll almost certainly be something to do with the admin bar - and, as such will be only visible if you're logged in.
Log in, then go to your profile and untick the admin bar on the front end and back end.
Then refresh in Chrome. Should be gone, then :)
Related
So I noticed this bug while generating a report with lighthouse on a certain site. After finishing, I closed the inspector and clicked on a random link within the site e.g About Page, however there seems to be a black space left behind. I tried running this on several sites, on some sites it shows up, on some it doesn't. Stack-overflow is one of the sites where it does show up.
Is this an issue with google chrome or with the lighthouse plugin? I haven't tried any other web browsers such as Firefox as I don't know how to use their auditing tools.
Thanks
Image attached for reference:
EDIT: Pressing CTRL+SHIFT+I populates that blank space with the inspector tool
I'm not an expert in web and I composed and updated my website recently. I ran all the test that I could on DreamWeaver CC and tested on multiple mobile devices (tablet, android and iphone); all seems to work fine. Until I uploaded the site to my server, the site start to act weird.
1st problem:
It is a portfolio website with individual pages to corresponding projects. On each project page, the first image on the lightbox has always gone missing; but clicking into the lightbox I can find the missing image (the preview image and the lightbox image share the same source so if the lightbox can find the image it implies that the image is on the server and the path is correct).
2nd problem:
when the browser is shrink below certain size, a toggle menu will replace the content on the header, clicking the toggle menu will show a pop up menu to site links. For some reason, after uploading the site to server, the toggle menu pop up never work.
3rd problem:
The above problem is never apparent on desktop browser(all image shows up correctly; toggle menu works). To make the problem more complicated, I can't confirm if it is device or browser oriented problem. For example, the site works on chrome browser on my iphone and nexus 5(android), but problem occurs on my xperia tablet(android) chrome browser; on my xperia tablet, the site works perfectly on firefox.
Does anybody has any idea what the potential cause to the problem, and perhaps a direction to a solution?
Here's the link to my site: http://www.itsatommy.com
Thank you for your time and look forward to any reply.
Looks fine to me (Google Chrome), you need to use media queries for some certain resolutions. You also need to use some cross browser css tags lide "-webkit, -moz, -o" etc.
I am using Bootstrap 3 on a site and I found a weird bug that I can't figure out. It deals with the mobile menu on smaller devices. When I view the site on iOS I can see the menu icon appear, but when I click on the icon the menu does not show up. However, if I then click an area where the menu should appear, the link works and takes me to a page.
To add another variable to the problem, when I view it in chrome with the dev tools acting as iOS and the screen small, the menu shows up and works as intended. So I am at a loss how to debug the issue.
I have tried setting the z-index to 1000 with no luck. I have not been able to find documentation regarding this issue. If you have run into this issue or know where there is documentation for it I would really appreciate some help.
Here is a link to the site with the issue(on mobile devices). http://dd.cakeandeatitdesigns.com
Thank you for your time and help!
Hey in my personal experience working with that it could happened when you open your web page with safari in IOS. I don't know what are you using to show the lateral menu, but some times safari doesn't work with certain js.
I have problem on my website. If I open my website with HTTPS protocol, chrome shows an empty area at the bottom of page.
You can reproduce this if follows this steps:
Open new separate incognito tab using the lastest chrome version on windows
Go to this page. It will show a message that certificate is invalid. Ignore it.
At the bottom of page should appear unused area.
Why chrome shows this empty area on my page? It will disappear if I resize window. I also tried to disable all plugins, but it didn't help.
Depending on which version of Chrome that you are using, there is a reported issue of this grey area displaying only when the "Show bookmarks" (ctrl-shift B) is selected. Here is a link to the bug report: https://code.google.com/p/chromium/issues/detail?id=139765
The issue purports to be fixed in the current version of Chrome.
I have made a website that's work fine on my computer (through all modern browser). Someone reported it's not worked from Safari mobile.
I have tried to see from Safari on windows that's make me look same as I want.
I have seen their screenshot and feel something wrong with my UI. Can someone have idea how I can check the look from my computer (windows).
How I can test my website for safari mobile from my computer.
You can actually download and install Safari in your computer and then check your website with all the available versions of safari for mobile. Choose Preferences->Advanced->Show developer menu in menu bar.
Finally, right click inside your website and then User Agent-> and then choose the safari version you want. Check this link for further information
Click "develop" on the top menu, then click on "user agent" and select your device... and navigate to your website.
check this out: http://webtide.wordpress.com/2009/09/14/how-to-test-websites-for-mobile-devices/
What you will need:
Safari Testing for iPhone/iPod Touch:
Open Safari and go to Preferences (Edit->Preferences).
Under the Advanced tab, ensure that “Show Develop menu in menu bar” is checked.
In the menu, click on Develop->User Agent->Mobile Safari 3.0 Browse to
your website and start testing!
Chrome Developer Tools has device emulation.