Tiles broken for High DPI screen

  • Resolved hm_u

    (@hm_u)


    7 years, 1 month ago

    Hi!
    it seems that the plugin is broken for screens with a high DPI. I never noticed that before looking at my website with a Surface Pro or an iMac 5K. Looking at the Google Map API for javascript (https://developers.google.com/maps/documentation/javascript/releases ), I noticed some bug fixes like “high DPI tiles broken”. So I’m wondering if you’re using an up-to-date API code in the plugin.

    Here is an example how it looks on the Surface Pro:

    View post on imgur.com

    I would love if you could fix that because I like your plugin very much! It’s clean, light and easy to use.
    Thanks!
    Manu

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Ian Dunn

    (@iandunn)

    Do you know if it happens on a 4k iMac? I don’t have access to any of those devices right now, but can check on a 4k next week.

    Thread Starter hm_u

    (@hm_u)

    Hi,
    I’ve just found out you can simulate it on any screen. I tried on a 1080p screen and then went into Chrome developer mode, “Toggle device toolbar”, set the resolution to 5120 x 2880 (5K iMac) and reload the page (see here). But then I tried setting to 1920×1080 and it’s also broken (see here, note that the simulated 1080p is rescaled to fit into the browser windows). My feeling is the problem comes from the rescaling and not the resolution itself (because on a high DPI screen some rescaling happens so that text and stuff are easy to read).
    Let me know if that helps.
    Thanks!
    Manu

    Plugin Author Ian Dunn

    (@iandunn)

    Oh, actually, I’m seeing the problem on a 2013 Retina MacBook Pro, but I don’t see the problem on other sites that use the plugin. That makes me think that it may be a CSS conflict w/ your theme instead.

    Can you test the examples on the plugin page and see what happens?

    Thread Starter hm_u

    (@hm_u)

    Damn it, you’re right… Your test examples work. So it means it comes from my theme. Sorry for the troubles! I’ve looked for other calls to the Maps API but nothing showed up. Any ideas what kind of CSS could cause that? Also, I know you can’t spend time debugging people’s website, so no worries.

    Thanks!
    Manu

    Plugin Author Ian Dunn

    (@iandunn)

    Hmm, I took a quick look through the elements in dev tools and didn’t see any extra CSS being applied, but their markup is a bit convoluted, so it’s easy to miss stuff.

    I’d suggest temporarily disabling plugins to test if it’s coming from one of them. If is is, then you can comment out sections of the particular plugin’s CSS file(s) until you narrow down to the specific line that’s causing the problem.

    If it’s not a plugin, then you can apply the same approach w/ commenting out sections of theme CSS until you find the specific line.

    Thread Starter hm_u

    (@hm_u)

    Thanks for your feedback, I’ll investigate!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Tiles broken for High DPI screen’ is closed to new replies.