I have a div, so that when I click, it will toggle to expand, or retract. It works pretty well on all browsers, though there is a thing that intrigues me. On Google Chrome when it retracts it leaves small lines from the movement.
www.rezoluz.com/login.php - The page
To see it, open that page with Google Chrome. And click on the register button twice, on the second time it will leave lines, normally, but not on other browsers. I'm using a standard .animate, with jquery. All help is greatly appreciated.
SCREENSHOT:
Also, here is a jsfiddle showing the result : http://jsfiddle.net/rwQPu/2/ . Error in Chrome 21.0.1180.81 beta-m Win7.
It's a bug of chrome. See a previously asked question here :
Odd “shaking” effect when animating width with jQuery (only in Chrome!)
This is not a coding problem but actually a bug in certain versions of Google Chrome, as unlikely that may sound.
There is no fix as far a I know, we just need to wait for Google to resolve their problem, knowing Google that will be done from the moment they find out about it.
Related
I am interested in hearing from anyone who has experienced this problem in the past or has any idea what the cause might be.
I am using the FullCalendar V3 library and when I click on the more events pop over the scrollbar does not work and I cannot scroll down to see all of the events.
The scroll bar does not work on Google Chrome Version 87.0.4280.141 however I have checked it on Firefox 84.0.2 and it scrolls ok on that browser.
I have not changed any of the library code and I have the impression it is some JavaScript that is the cause but would not know where to start.
Thank you in advance for any ideas.
Below is the popover in question:
This is caused due to a chrome smooth scrolling issue. Assuming you have no control over the browser side and therefor cannot disable that feature. Applying this to the scrolling container inside the popup should fix the issue.
pointer-events: auto !important
Note the selector I used was.
.fc-more-popover .fc-body.fc-widget-content .fc-event-container
When using the middle Mousebutton (click once and drag) to scroll the table, the browser reliably stops scrolling after a second. This only happens in Chrome's latest build (61.0.3163.100), it definitely did not happen before.
Slickgrid Demo to illustrate the problem. http://mleibman.github.io/SlickGrid/examples/example1-simple.html
Does anyone know what causes this? It is not a slickgrid specific problem. I noticed this behaviour with several other virtual-scroll table frameworks.
This happened by using jquery smooth scroll library outdated version.
I got solution from here,
forum help
Now Updated version you get from here,
Hope this solution solve your problem.
Turns out it is a chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=769390
The circles at the bottom of this site: http://benupham.com should open on click, but do not in IE 9 (and below, but concern is with IE 9). The JS is a modification of the example here. But I'm not even sure it's the js -- it could be the CSS. I'm viewing this bug through browserstack, which makes it very difficult for me to diagnose. Thank you.
You seem to be using transition in the code, that specific event is not supported by IE 10, 9 or 8. To get a better idea of the browser support available for transition or any other CSS you could check it out here: http://caniuse.com/#search=transition
If you're still having issues, I suggest showing some of your code and possible a gif of whats happening exactly.
I've been developing a mobile-first site, using Firefox as the primary browser. I have a branding logo at the top of the page, loaded by way of the WordPress customizer. The logo appears fine in Firefox, but disappears in Chrome and Safari when at a width of 320px. (That's the base width for this project.)
I'm just troubleshooting and trying to find the best way to fix the problem. I'm not really sure what's causing the issue, yet, though. I was hoping to get some other perspectives on this.
Here's the link:
--- link removed ---
Thanks!
I would like to suggest you something that had helped me a lot of times when I did not know from where comes a problem:
Reduce the content only to the part you want to fix(or in case if you have a bug and do not know from where comes - start removing code element by element).
BTW in the developer tools is showing a lot of errors.
Thanks, Marin. I appreciate your suggestions. I think my server at work may be contributing to the issue. For the time being, though, switching the width and height from % to em has at least resulted in the images being visible in chrome and safari. I think I'll have to wait until I can test it outside my workplace to be sure, though. Lol. Thanks, again.
I just found out about this really cool plugin (new for me, old for some of you maybe) and it works like a charm upon implementation, but only in regular computer browsers. When I try it on my android phone, the css3 animation of the dropdown moves really really choppy, just like its dropping frames. How can I fix this problem?
Here is the plugin I am reffering to:
http://responsive-nav.com/
They seem to have done a really nice job with the plugin, I would say the largest cause of the drop of frame rate may be because you are repainting the entire screen. If you would like, roll your own side navigation but make it go over the existing web page rather than move all the elements on the screen.
EXAMPLES OF SIMPLER MOBILE NAV without repainting
http://fringewebdevelopment.com/
http://www.sony.com/index.shtml
As a further step you can also get rid of the javascript and just do plain CSS and see how that works for you, an example of using checkboxes and labels to control the side nav can be found on my site (just inspect the code) - www.aktof.ca . Hope this helps!