iOS tooltip size changes when scrolling

[miguelwicht]

Hi,

when scrolling on iOS Devices the tooltip starts getting weird sizes. I could reproduce this on an iPhone with iOS 10 Beta as well as an iPad running iOS 9.2.1.

iPhone:

iPad:

[louisameline]

Hi, thanks for the report.

I am stuck on iOS7 and I have no newer device to address this. I don't know when I will unfortunately. Would you be ready to help me debug?

This bug is weird as the tooltips should not be affected at all by scrolling unless repositionOnScroll is set to true or if the origin is in a scrollable area.

The first thing to do would be to set breakpoints in the private __scrollHandler method to see what happens. I'd need to know if Tooltipster tries to reposition when it shouldn't, or if it's the browser that just goes crazy and can't handle the display of a plain div. Even if it were Tooltipster that was trying to reposition, the next step would be to understand why it fails at it.

[miguelwicht]

Hi,

so I started debugging the plugin and I think I have found part of the problem. __scrollhandler seems to work fine as the reposition is not called from there. The problem seems to be the resize event that is triggered when Safari changes how much of its interface is shown. As you can see in the screenshots in the initial post, Safari shrinks the navigation bar when you scroll down so that the website gets more space. This behaviour is reversed if you scroll up. This change triggers a resize event which then triggers the repositioning.

$(env.window)
  // reposition on resize
  .on('resize.'+ self.__namespace +'-triggerClose', function(e) {
    self.reposition(e);
  })
  // same as below for parents
  .on('scroll.'+ self.__namespace +'-triggerClose', function(e) {
    self.__scrollHandler(e);
  });

I am not sure when Apple introduced this behaviour. iOS 8 has it. It works on iOS 6 as there the navigation bar just scrolls up with the content. I don't have access to an iOS 7 device at the moment so not sure if the bug is present there.

The next step would be to find out why the positioning is messed up.

[louisameline]

Ok, interesting, thank you. It works fine on iOS 7.

I guess it's the Ruler.measure method (line 1346) that returns a wrong size for the tooltip then. Out of the blue like that, I can't figure out why.

You could set a breakpoint at var tooltipBrc = this.__$tooltip[0].getBoundingClientRect(), and remove the visibility: hidden; property of the .tooltipster-ruler rule, it will let you see what happens during the measuring process.

[miguelwicht]

I think I have found the culprit. On my iPhone 5s the geometry.window.size.height is always 460 even though it should be bigger once I start scrolling. This happens because $(window).height() does not return the right height for iOS devices. Details about this problem can be found here.

[louisameline]

The window height is the height of the viewport (not the distance to the top of the page), and should not be affected by scrolling. There is indeed this issue with the window height : #560 but I'm not sure that's the problem here.

[miguelwicht]

The problem isn't really the scrolling but the fact that scrolling toggles the "minimal ui" in Safari. This then triggers a resize event. This is all as it should be.

These are the two states Safari can enter. The problem is that in both cases $(window).height() returns 460 for the iPhone 5s. This causes geometry.window.size.height to always be 460 even after the resize event triggered. Which I guess messes up the height calculation.

[louisameline]

Yes, I understood what you meant, and you are actually confirming that issue #560 still happens on iOS9/10, so thanks :)

But the size of the window is supposed to be independant from the size of the tooltip. The size of the tooltip is always supposed to fit to its contents. What seems to fail here is the measuring of the content.

[miguelwicht]

First I wanted to thank you for taking the time to help with this issue. I really didn't expect such a quick response.

But now back to the topic :-)

After I got the breakpoints in Ruler.measure() to actually work, I found out that tooltipBrc.bottom did not return the right values. If I use tooltipBrc.height instead, everything seems to works fine.

measure: function() {

  this.__forceRedraw();

  var tooltipBrc = this.__$tooltip[0].getBoundingClientRect(),
    result = { size: {
      // brc.width/height are not defined in IE8- but in this
      // case, brc.right/bottom will have the same value
      height: tooltipBrc.height,
      width: tooltipBrc.right
  }};

I'll have to do some cross-browser testing but that's probably not gonna happen until later next week.
Also I do not need IE8 support so for a quick fix, this would work for me.

[louisameline]

You're welcome, and thank you for pinning this iOS bug down.
This line should hopefully work cross-browser then:

height: tooltipBrc.height || tooltipBrc.bottom

"Brc" should be "Bcr" by the way, I'll fix the typo.

[louisameline]

I released v4.0.5 with the patch, as I saw no reason not to trust tooltipBcr.height when it's defined.
I wish I could get to the bottom of this getBoundingClientRect Safari bug but hey, that's on Apple I guess.
Thanks again!

[miguelwicht]

Thanks. I'll try it next week.

[miguelwicht]

Hi,

I had a quick look and saw that the width should be changed to

width: tooltipBcr.width || tooltipBcr.right

as well.

[louisameline]

Okay thank you, added to 4.0.6