Member Avatar for ashleyplott

Click Here

I have attached a vimeo to the issue, the main issue is that google maps seems to be sluggish and not well tracking and slow.

Has anyone got any sugestions? Thanks

  • 3 Contributors
  • 7 Replies
  • 352 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by ashleyplott

Dani AI

Generated

Useful summary and practical fixes based on the thread

Good catch by — the visible “jumps” were caused by a stylesheet that applied a transition rule globally to every element. That kind of rule makes Google Maps’ many internal DOM updates interpolate over time instead of applying immediately, which produces the sluggish, stuttering motion some testers saw (as noted, the effect can vary by device and browser).

Why this breaks maps - short version: the Maps UI constantly updates tiles, markers and transform/position styles. A global transition forces animation for those changes, so the browser spends extra time interpolating and repainting lots of elements. That increases main-thread work, triggers reflows/repairs and makes panning/marker movement look “jumpier” rather than smooth.

Quick, practical steps to reproduce and fix

  • Debug first: open DevTools, search your CSS for transition rules and temporarily disable the global one to confirm the effect disappears.
  • Best long-term fix: scope transitions to only the UI controls that need them (links, buttons, menus) instead of applying them to every element. For example, limit transitions to color/opacity properties for UI elements and avoid animating layout properties.
  • Fast workaround if you cannot change the whole stylesheet: explicitly turn off transitions inside the map container so internal map elements are not affected.
#map, #map * {
  transition: none !important;
}

Performance tips and caution

  • Prefer animating opacity and transform (GPU compositing) rather than top/left/width/height.
  • Use DevTools Performance and Paint-flashing to spot costly repaints and long tasks.
  • Use will-change sparingly — too many layers can hurt performance.

After removing or scoping the global transition, test across several devices and browsers (as suggested) to confirm the behavior is consistently smooth.

Recommended Answers

All 7 Replies

Member Avatar for rproffitt

The Vimeo link says "Sorry, we couldn’t find that page". Here Google Maps seem fine. Have others test this for you.

Edited by rproffitt because: Remove "it". Replace with what it is. Clarity Bob.
Member Avatar for Dani

Can you upload the file as a post attachment here on DaniWeb?

Member Avatar for rproffitt

Sorry but the video does not look glitchy to me. Keep in mind I was on teams with GPS tracker development and it does jump a bit at times but I saw no glitch.

Member Avatar for ashleyplott

rproffitt,

That's the word, jumps. What could be causing this. For some reason it's not smooth :/

Member Avatar for rproffitt

Sorry but the video looked normal to me. I wonder if you tried it on a few dozen machines and phones? We did. Result? Some were smoother.

Member Avatar for ashleyplott

So, I found the issue, there was an all class css rule added.

*{transition: all 300ms;}

this was the cause.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.