I'm trying to use Chrome developer tools to inspect elements in a page that contains a Nivo-Slider.
The focus repeatedly keeps on jumping to the slider which is very annoying.
Is there a way to avoid this without changing the production code (maybe calling a function on the page)?
You can reproduce the issue here, if you're using Chrome. Open the page, right-click any element (not the slider) and select 'Inspect Element' then when the slider switches, the focus moves to the slider. Very annoying if you want to inspect other elements in the page especially if they're far from the slider.
Try calling the stop method of the Nivo Slider plugin from the browser console like this jQuery('#slider').data('nivoslider').stop(). Replace '#slider' in the jQuery constructor with the id of the element on your page that the plugin is bound to. For example, on the demo page running jQuery('#nivoslider-156').data('nivoslider').stop() from the console should stop the Nivo Slider from animating.
Related
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.
I have a cordova app where there is some input fields which requires the keyboard. But when the keyboard is open it's like the app is frozen. More specific, I have a div as a bottom bar which has a fixed position, but when the keyboard is opened, it can scroll, however when I close the keyboard, everything returns to the expected position. Any idea how to make it not freeze? This is only a problem on iOS. Android works perfect.
My app has the same issue, selecting an input field causes the keyboard to show up and severely lag the app until the keyboard is hidden. After testing simple pages with no scripts or css on multiple devices I found that it primarily affects iPads on at least iOS 8.0 and above. It can cause slowdowns on iPhones but they seem to recover a lot faster.
The best solution I've found so far is to setup an in app keyboard. For my login page, I have an element that is styled as an input field and when it is clicked, it toggles a keyboard div element to appear which has buttons for each key inside it.
Developing a plugin for Chrome, I've used data-tooltip for links which require a tooltip. Until 2-3 days ago, everything seemed to be working fine.
Today I've discovered that the tooltip for links inside a modal display behind the modal. Nothing has changed in my code. I even tested with older versions of my app ant it still displays the tooltips behind the modal.
My guess is that Chrome has changed the way it views tooltips. Any idea what I can do to fix it?
Example of tooltip usage:
<div class="choose-platform" data-tooltip="GoogleDrive">
...
</div>
Screenshot of the error I'm facing
On hover of Google Drive Icon, the tooltip appears behind modal
It seems like tooltip is appended in body. Try giving higher z-index than modal box
I'm working on a web page design and Chrome is wigging out when I change a stylesheet. I'm trying to switch between light and dark themes.
I have this <link> to start:
<link rel="stylesheet" href="/css/dark.css" id="theme">
To change the theme, I'm doing this:
$('#theme').attr('href', "/css/light.css");
I have code to actually toggle (loads dark if light is loaded, and vice-versa). Whenever the stylesheet of the non-default theme is loaded, it likely -- but not always -- glitches after I move my mouse around. For instance, after I first toggle the theme to the light theme:
It actually does repaint the full page with the theme for a split second, but then it turns the screen black (but it does not revert back to the dark theme, as the dark theme is not black; it actually has a dark gradient).
When I move the mouse around some more:
The white area expands in blocks over where my mouse is moved, until I move it over most of the page it goes back to what I expect. Or, I can resize the window and Chrome fully repaints the page as expected.
Removing the fancy tooltip doesn't fix the problem:
I've tried invoking a window resize event. I've tried using jQuery to show/hide the html and body tags to try to trigger a repaint. I've also tried deleting the theme's <link> tag entirely and adding a whole new one to the DOM. Alas, I see the same effect.
Firefox and Safari don't behave this way. But I absolutely have to get this working on Chrome. Any ideas?
Update (March 2014): This page is part of the web UI of GoConvey. It still renders fine in Firefox, and the glitching in Chrome at this point is less frequent and slightly different in its nature, but it's still there. Anyone is welcome to take a look if you are feeling generous.
Wow. Here's the CSS hack to fix it:
-webkit-transform: translate3d(0, 0, 0);
This forces Chrome to use the GPU to render the element. I no longer see the glitching.
Update about a month later: Okay, well, I've continued to develop this web app and now the glitching is back. Still trying to work around it. Now sometimes the whole viewport goes blank and I have to resize the Chrome window in order to get it to re-appear.
If anyone would like to try this and see the glitch live, the page is GoConvey's web UI (Chrome on Mac).
We have a third-party external web page on another domain that we're loading in an iframe, and we've found that in IE7 none of the select drop-downs in the iframe page react to mouse clicks. The drop-downs seem to populate okay, but if we click on the drop-downs they become highlighted but the options box doesn't drop down. Once highlighted the options can be changed using the mouse wheel or with the keyboard arrow keys. Other HTML form and other elements also work fine. We've reproduced this on Windows XP SP3, but we're not sure if it's tied to that operating system.
Both sites are SSL, and there are no security warnings showing up. It seems as if there's some div or other element on a higher z-index interfering with the iframe page interaction, but we can't find anything. The interaction also works fine when the page is loaded from the same domain without SSL, running inside a non-SSL test page in our development environment. So it seems likely to be a problem specifically related to SSL and/or the fact that the contents of the iframe are coming from a different domain.
This also works fine in all the other major browsers we've tested in.
Same problem over here. Seems to be a problem with the KB2586448 update
http://support.microsoft.com/default.aspx?scid=kb;en-us;2628724
A fix is now being pushed out on Windows Update:
http://support.microsoft.com/kb/2618444
FIX: Some drop-down lists and combo boxes do not appear in Internet
Explorer 7 after you install security update 2586448
So hopefully we should soon be able to remove all the fixes and warnings.