When I mouse over many inputs and textareas all over the web, I see some weird text.
I thought it was on StackExchange only, but it happens on amazon:
(note that you can't see my mouse in these pictures, it is not recorded in the screenshot, but it is on the upper-left of each hover text.
Chrome's DevTools shows a weird title attribute:
I have no idea why this happens. The websites I've seen this on don't seem to have a library in common, so I doubt that would cause the problem. At the same time, I have seen this in browsers other than chrome, so I don't know. Even the textarea that I'm typing in right now has the problem.
Why does this happen and how can I prevent it from happening to my website?
Looks like that's a built-in Chrome option, an "experimental feature." Go to chrome://flags/ and disable "Show Autofill predictions" if you want to turn it off (mine was disabled by default).
Related
i have a website with alot of popup windows and z-index going on.
Chrome version: 46.0.2490.80 m (never seen in other browser, but cannot omit it)
Everything works fine, but every 50th (not precisely, but very rarely when opening popup or coming back from alt-tab)
Behind all this: my website.
The red: the fullscreen overlay beneath my popup.
The lightGray: my popup window.
The darkgray: popup content.
So for some reason, the corner of my div is cut off. The problem is not connected to this particular popup, or this particular corner.
I have sometimes seen this following an alt-tab into chrome, but not enough to say that's the problem.
I have never seen anything like this, usually it works or breaks, this time its working breaked.
Any clues?
The HTML and CSS are rather large so I can't pinpoint the issue or post a good example. When I toggle through my UI, the css styling seems to break, the most jarring of which is that the background changes to grey. I was wondering if anyone encountered similar issues. Here are some of the conditions for me.
-Chrome: Firefox & Safari working fine
-Small Screen: Problem doesn't occur on larger monitors
-Toggling developer console on and off fixes the issue
It's difficult to try and pinpoint the issue without seeing some code or even a fiddle, but when you open the inspector the page is resizing, and so redrawing (at least some of) the elements. It's also possible that there's a cache issue - I believe by default when you open the inspector the cache is disabled and so all css and scripts are downloaded again. That said, if you aren't refreshing the page it with the inspector open its unlikely to be that.
My money would be on the window effectively resizing when you open the inspector, and so some (if not all) elements are forced the redraw and thus re-evelauate their styles.
Maybe you could use Chrome's timeline to check what is being painted as time goes by. Try running that and opening the inspector while its active to try and see whats going on.
Looks like a long standing bug (years) with webkit:
How can I force WebKit to redraw/repaint to propagate style changes?
The solution that appeals to me is:
$('#body').hide().show(0); from Force DOM redraw/refresh on Chrome/Mac
to force a redraw.
I know this question may not fit well here but this really is driving me crazy for few hours now :( I use chrome to simulate how websites look on different mobile devices. I clicked something wrong that led to a grid with rulers to appear. I don't know WTF to do to disable this grid. This is the screenshot:
I uninstalled and reinstalled the browser and it returns back.
I reset the developer tools to default settings and it's still there.
This is really becoming a nightmare for me for few hours now. I want the regular emulation without these rulers and grid and top bar. Thanks
There is a small blue button on the left of Elements which actually does the magic.
You didn't click anything wrong. Your Chrome updated itself to 38.2125 and the emulator now has those attributes. Further more, the touch function is broken.
To fix the problem, download the "Canary" version of Chrome. You're still required to see the grid, but the screen is improved and easier to see your layout. Also, the touch function is fixed.
Get Chrome Canary here: https://www.google.com/intl/en/chrome/browser/canary.html
That button just enables/disables the emulator. The OP is looking for a way to disable the background grid while emulating mobile devices.
If you're looking to disable the multi-colored grid lines that show up as an overlay, check out the console dock on the bottom of dev tools. There is a tab labeled rendering and try disabling "Show composited layer borders". If you're still seeing the rulers, that setting is in the Settings (gear) of dev tools, there is an option under the Elements heading for "Show rulers".
My webpage is rendering oddly in Chrome on a Mac. This is just below the fold of the page, but when I highlight the area it comes back into view, also if i use the "inspect element" it just shows the page as it should.
Its also not consistently, it only happens now and again.
Rendering Issue:
http://albertcrm.com/1.png
When I highlight:
http://albertcrm.com/2.png
I really have no idea how to even start debugging this, I guess its a CSS issue maybe, or a Chrome Rendering issue, maybe a JS include is taking to long to load?
There is an anchor in one of my websites.
http://www.autostitkok.hu/tozsde3.html#jelentkezes
Firefox 3.6.8 doesn't "stop" at the anchor if I use an anchored link, but rolls down to the bottom of the page.
If I click into the address bar of the browser, and hit enter, the browser jumps to the right place, but obviously this isn't the way it supposed to work...
I asked other users and they have the same experience with this link on this site, so the problem can't be my computer.
Other browsers work properly.
I tried Opera, Google Chrome, and IE8.
Thank you,
Gabor
Searching on Google suggests that the name attribute is deprecated for links. You might want to try using the id attribute (<a id="jelentkezes">)instead.
If that does not work, I think looking into the HTML validation errors would a reasonable next step.