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.
Related
when open chrome some element getting overlap
like As seen in this picture
I need fix this problem
Even I have faced the same issue.
What I did is I just opened dev tools in separate window.
Click on the 3 dots icon then you can find dock side option, In dock side select the first option which will pop out the dev tools into new window.
In this image you can find the dockside option
This is how the dev tools window will open
Now you can view the entire web page as well as dev tools.
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
How do I enable this inspect element in Google Chrome? The part that is enclosed in red box.
Because right now, by default, this is what I see with my inspect element.
Do I need to install something or this is within settings?
Your screenshots are from different browser dev tools. If m not wrong, the top one is on Firefox where the bottom one is Chrome.
The Inspector tab is similar to the Elements tab in Chrome
The Debugger tab is similar to the Sources tab in Chrome
When I open Developer tools and turn on device mode, and click any drop down on the page chrome renders options with minimum width and rest of the area as black.
I dont know what is causing this error. I tried to update my graphics card driver, but problem still exists.
After some googling, got to know that this is an issue in Chrome browser itself. Refer the following link for more info - https://bugs.chromium.org/p/chromium/issues/detail?id=553274&q=status%3Aunconfirmed&sort=-id&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified&num=1000
I'm working on a hybrid app using Cordova, Bootstrap and Angular JS (1.3.x) and testing it in a Chrome desktop browser and on a Android device (lollipop, 5.0.2).
In a particular view, I open a modal window using ngDialog. The content in this dialog can exceed the height of a typical smartphone size, so vertical scrolling is required. And here comes the problem:
Most of the elements that should be displayed at the bottom of the dialog (out of initial sight) do not appear or don't getting rendered. When I blindly tap on the area where the disappeared interactive elements should be, they will get painted. When I then scroll up again, elements at the top disappear.
This behavior didn't exist on Android 4.4.
Now I'm able to reproduce this error on my Windows Chrome Browser (v43).
These are the steps:
Run this Plunkr http://embed.plnkr.co/VGYUe2i9vwsQZ21vc3LB/preview
Test with a recent Chrome Version
Make sure, this plunker is shown in embedded view (important)
Open Chrome developer tools
Click "Toggle device mode" (smartphone icon) (important)
Limit the vertical resolution to about 600px in height Click "open dialog" and scroll down to the bottom
Can you read "Hello, do you see me?" ?
If not, press on one of the panels on top or below the textbox, this
will cause a repaint and you can see the text.
This is how it looks:
Not OK -> No text in marked red boxes:
OK -> After clicks on it or browser tab switch
I found this article on postman blog, but the "fixer" does not seem to work in my case.
http://blog.getpostman.com/2015/01/23/ui-repaint-issue-on-chrome/
Can someone point me to the right direction?
I followed the instructions in the linked blogpost and those seem to work for me. Specifically, adding
-webkit-transform: translate3d(0,0,0);
to my CSS for ngDialog-content which has overflow-y: scroll.
Now the div scrolls on load for me.
The other good news is that at least my issue seems to be gone in Chrome Canary, so it may be worth seeing if the issue still exists for you there.