I'm using a specific template which seems to cause a deffect with scrolling.
Whenever I recieve data from ajax and insert enough HTML so that the page should get a vertical scrollbar, it doesn't.
When I open up chrome devtools, or when I hover an element that has a popover, the scrollbar suddenly appears.
It only seems to effect google chrome.
I can't seem to find the cause and I'm wondering if there is something I can do to trigger an update, just like the devtools do.
When using jQuery, you could try to do
$(window).trigger('resize');
To trigger a resize, like what happens when you open your devtools.
Related
I found a really strange behavior when using a Materialize CSS modal in Firefox (66.0.1). It works fine in Chrome (73.0.3683.86) and MS Edge (where do you find the version?). I'm using Windows 10. It does this with the modal demo in the official Materialize CSS website as well.
The problem seems to start if you display a modal with enough content so that it displays a vertical scrollbar. It needs to have links or buttons to see the problem I will describe. You can simulate this by resizing Firefox so that its vertical height is small enough to make the scrollbar appear. Now close the modal. Then resize the height of Firefox so that the modal will appear without scrollbars. Open the modal and hover over a link or button and any hover effect that should happen, does not. Click once on any link or button and nothing happens. Click a second time and it works properly.
And even odder, after opening the first modal with a scrollbar, you can open the second without a scrollbar and do nothing for about 15 seconds and then the links or buttons will work fine.
When this happened, I tried right-clicking on the button to "inspect the element" in the Firefox Inspector. Instead of getting the button, I got the modal overlay element behind it. Note that when this happens, the overlay is not above the button or any of the modal content. It's not a z-index problem. To see whether it was a problem with the overlay, I added an onOpenEnd() function to the modal options that would remove the overlay as soon as the modal opened. I had the same problem. When I tried again to open it in the inspector, I got whatever was behind the button. So it's almost like the modal isn't even there until I click on the modal first or wait for 15 seconds.
I then tried to add some code to the onOpenEnd() function that would give focus to the button, but no effect with that. I tried tabbing to the button, but that didn't work either.
Just before submitting this I found another piece of the puzzle. As I said, hovering over the buttons when this is happening will not show the usual hover pointer. But if I hover above and a bit to the left of the buttons, the cursor does change. When I click there, the color of the buttons does change like it's been clicked, but the action (closing the modal) does not happen. Hmmmmm....
If you want to test this out, go to the Materialize CSS webisite and open the page for modals. (https://materializecss.com/modals.html) Reduce the vertical size of Firefox so that when you open the demo modal it has a vertical scrollbar. Now close the modal. Resize Firefox back to normal vertical height and open the modal again. Hover over the Agree or Disagree buttons and you won't get the pointer cursor. Try click once and nothing happens. Click again and the modal will close. Or wait the 15 seconds and then the buttons work.
Most of my users will have the modal open for more than 15 seconds so it's not a big problem. But sometimes they will open it just to check something and then want to close it. Sure they can click twice, but I'd rather it work properly. Chrome and Edge work fine. Firefox doesn't. Can anyone think of what is causing this and whether there is anything I can do in my code to make it work properly? Thanks.
Trying to move from developing on Chrome to Firefox Dev Edition, and when I am in the Firefox DevTools, I'm triggering the hover state on an element but the state disappears as soon as I click any other element.
This is not happening in the Chrome DevTools, for example. The element is hovered until I cancel the hover state or reload the page.
I'm not interested in using jQuery to trigger the state.
How do I make it permanent? Is this supposed to be like this, or is it just a bug?
The behavior you are seeing is indeed a bug in the Firefox DevTools, which is filed as bug 1185797.
I am developing a website: http://www.techniquetolife.com
It's basically a div 5x as big as the window inside window sized div, with other divs within the large div, using the overscroll and scrollTo plugins to navigate.
The website works perfectly fine in Safari and Firefox for OS/X. But I am having serious trouble making it work in Chrome. I'm not sure if it's an Chrome OS/X only problem, but whenever I scroll over one of the inner divs within the large div, the whole browser slows down, this only happens in Chrome...
If I disable overscroll and use the scrollbars it works 100% fine, but I really want to use the overscroll drag to scroll plugin.
I am no good at coding so any help would be greatly appreciated.
All of the plugins / browsers are on the latest version.
Okay, well I posted an answer to a similar question that I think this might be related too. I could be wrong though, but you could test it.
See the full question and my full answer here: Chrome slow scrolling with fixed position elements
Problem and How to Monitor It
The reason for this is because Chrome for some reasons decides it needs to redecode and resize any images when a fixed panel goes over it. You can see this particularly well with
► Right Click Page -> Inspect Element -> Timeline -> Frames
► Hit Record on bottom
► Go back to the page and drag scrollbar up and down
This seems to just be a problem with the method Chrome is using to determine if a lower element needs to be repainted.
To make matters worse, you can't even get around the issue by creating a div above a scrollable div to avoid using the position:fixed attribute. This will actually cause the same effect. Pretty much Chrome says if anything on the page has to be drawn over an image (even in an iframe, div or whatever it might be), repaint that image. So despite what div/frame you are scrolling it, the problem persists.
The Easy Hack Solution
But I did find one hack to get around this issue that seems to have no downside as of now. By adding
-webkit-transform: translateZ(0);
To your fixed panel, putting that div in its own compositing layer.
I have a problem with a site (unfortunately I can't provide a link because it's on a staging environment).
I have a jqueryui dialog that opens when page loads, if you scroll down the overlay covers all of it.
Then some part of the page is updated by ajax calls and the height of the page increase and that's the issue, the overlay don't covers all the page any more and the bottom content is accessible.
I can see that the overlay adapts to certain changes, like resize of the page.. is there a way to update it when scrolling down for example? that could solve my issue
I'm sorry I can't provide a link that shows the issue..
Regards,
Gianpiero
In a similar situation I found a successful workaround by triggering a window resize event after each asynchronous DOM change:
$(window).resize();
I have an XBAP that is in an IFRAME, wrap inside a DIV, which can be hidden and shown at the users will. But, in FireFox, after hiding the DIV and later re-showing it, the XBAP disappears.
I have tried all sorts of refresh methods I can find, but nothing seems to work. I don't want to reload the XBAP as its showing information specifically available at the time.
Any suggestions?
onstatechange was causing the problem. Writing a JavaScript method around this to detect the browser type fixed the issue.