default HTML output on iPad

[rstudio]

default HTML output on iPad

[jtbayly]

I just posted a video demonstrating the problem is Safari on iOS. It's not limited to Chrome. Chrome uses the same rendering engine as Safari on iOS. Every browser does, because Apple requires that. Thus, the problem likely afflicts all browsers on iOS, and just depends on the width of the viewport, and zoom level. (I've even confirmed it on a Tor browser on iOS.) Just put an iPhone in landscape mode and you will see this problem. In fact, the bug goes back to gitbook (the original project that this template was taken from), and you can find lots of old gitbooks online that have the same problem.

I'm very poor at front-end stuff (even worse than I am at backend stuff), but I'll try to at least track down more specifically what the problem is.

For now, I'll note that on my iPhone, if I zoom out to 50%, the bar comes back. And if I zoom in to 125%, it also comes back. Everything in between it is missing. 🤷

[mpereira-dev]

This worked for me on iOS + Safari | Firefox | Chrome:

* {
  -webkit-overflow-scrolling: auto
}

Changing from touch to auto didn't seem to affect the momentum based scrolling.

There is now quite a bit of discussion on this issue on the web once you know what to search for:

• https://stackoverflow.com/questions/9807620/ipad-safari-scrolling-causes-html-elements-to-disappear-and-reappear-with-a-dela
• https://stackoverflow.com/questions/4889601/position-fixed-doesnt-work-on-ipad-and-iphone

I did get the toolbar to render by forcing hardware acceleration as suggested with:
-webkit-transform: translate3d(0, 0, 0);

But for me, the toolbar was then no longer fixed to the top of the page.

So I ended up overriding gitbook-2.6.7/css/style.css as mentioned above.

* {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  -webkit-overflow-scrolling:touch;               /* This is the problem. */
  -webkit-tap-highlight-color:transparent;
  -webkit-text-size-adjust:none;
  -webkit-touch-callout:none
}

References:

• https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling

[yihui]

@mpereira-dev That's really awesome! Thank you so much for solving this long-lasting mystery!

@jtbayly I just applied the fix so you can try the dev version:

remotes::install_github('rstudio/bookdown')

[mpereira-dev]

Thank you @yihui for all the hard work, the community has greatly benefited from your efforts.

@jtbayly my flavor of Gitbook is a bit customized for a client (lots more CSS). Please do test the fix on the vanilla version before promoting.

🥂 Miguel

[jtbayly]

This is also an issue on an iPhone XS in landscape mode.

[jtbayly]

Still an issue, though. From my iPhone XS:

demo.mp4

[dullhunk]

The issue has been closed but it's still open, can we re-open it or should I open a new issue? If affects lots of clients, any iPad or iPhone I've tried has the same problem. It's impossible for users to click on a menu they can't see.

[dullhunk]

As far as I can tell, this bug looks like a problem with Google Chrome on an iPad (not a specific bug with Apple Safari, iOS or iPadOS). I've done some testing on the following devices:

• iPhone XR
• iPad 2nd generation
• iPad air 4th generation

...by viewing bookdown.org/yihui/bookdown using Chrome and Safari. The top ("hamburger") menu appears fine on Safari on all three devices, but isn't displayed when using Google Chrome on an iPad. The menu appears fine using an iPhone with Chrome. See screenshot below @cderv @kylelundstedt @yihui

[jtbayly]

Can confirm this fixes it on the iPad, but unfortunately not on the iPhone. Not sure why.

EDIT: It does seem to be working on the iPhone, too. I guess I had a cached version or something when I first tested. This issue does seem to be fixed on all devices I have to test it on.

[yihui]

You can tap the first button on the toolbar to toggle the sidebar:

[kylelundstedt]

Hmm. I'm probably a complete knucklehead, but the toolbar does not appear in Safari on the iPad when viewing the HTML output. I went to both of the following sites to confirm:

http://rstudio.github.io/bookdown/
http://r4ds.had.co.nz

No amount of tapping, double-tapping, etc causes the toolbar to appear. What am I missing?

[yihui]

Okay, I just looked at it on iPad and indeed the toolbar buttons were invisible. This is similar to #44. The buttons are actually there but I don't know why they are not displayed. You can scroll down the page, and you can see a blank toolbar at the top. You can actually tap at the left of the toolbar.

[jjallaire]

@jmcphers If you could spend 15 minutes looking at this we'd be eternally grateful (realize you have plenty of other things cooking this week so please just spend 15 minutes in hopes this is a really simple thing to resolve). The issue does repro on the XCode iPad simulator but I couldn't figure out how to do the equivalent of Inspect Element there.

[dataopt]

It looks like the book-header.fixed class is causing problems on the iPad. It is not clear why that is the case. So there is a way to bring back the toolbar by simply removing this class entirely from the css definitions. But doing so will make the toolbar scroll with the body content. HOWEVER, this latter behaviour is what is found in the current gitbooks. See this for example.

[luispuerto]

Hey!!

Is this going to be fixed?

There is a workaround that is to pull with your finger in the top part of the screen so buttons of the menu will show up for a second —so you know where you need to push— but a solution would be really appreciated. :)

[dullhunk]

As far as I can see, as of September 2019, this is still a bug. I've tested by viewing e.g. r4ds.had.co.nz on a reasonably up to date iPad Pro and the menu icon (and whole menu bar) does not appear. @yihui

Not a problem on safari and macbook, but haven't tried an iPhone which will probably have the same problem and an ipad. @luispuerto

If you tap on the blank space where the menu items should be, the menus work, but that's not much use unless you're familiar with bookdown.

[luispuerto]

I've tried in the iPhone and the problem is the same. It a problem with Safari from iOS I guess. But it also happens on Firefox for iOS at least in the iPad, so I guess it's a iOS problem in general. I believe that all of them use webkit.

[dullhunk]

If it is is webkit that's the problem, it doesn't affect webkit & safari on a laptop / desktop - they work fine.

It seems to be specific issue with webkit/safari on an iPad/iPhone @luispuerto

[chipbrock]

This is a real problem if one is trying to show off work. Please fix it! Thanks.

[luispuerto]

@chipbrock this is only still a problem if you haven't update to the last version of iPadOS or iOS.

[chipbrock]

Thanks for a quick reply.

I’m running iPadOS 13.1.3 on a new iPad mini and it is not functioning as it should - no sandwich icon (or any icon) at the top of an otherwise respectable page of a document.

On a computer, the icons are all proudly displayed as per normal.

So I don’t think the new update fixes this. What am I missing? See attachments.

[luispuerto]

Can you check this one?

https://geocompr.robinlovelace.net/

In my iPad works just fine

[luispuerto]

It's working also fine on my iPhone 5S with iOS12

[chipbrock]

Thanks.

I think I get it now. Your page does not render with the sandwich visible on my ipad mini, but it does on my phone and on my ipad pro. So I suspect there's an issue with the adaptive width assignments in the css that governs the framework.

BTW. My page also renders fine in my larger ipad confirming for me that this is the problem. There must be an in-between size under which the sidebar collapses - which it does on the phone that's not in sync with the instructions to the header.

What I REALLY wish could be instituted is a switch to collapse the sidebar by default. From browsing other discussions, this seems to be a feature and not a ...lack of implementation.

In any case, this sandwich showing/not showing does seem to be a bug in css.

[dullhunk]

This is a bug on iPad pro too. For example here's a screenshot from an iPad Pro (12.9 inch) 2nd generation running software version 13.1.3 looking at https://r4ds.had.co.nz/ by @garrettgman and @hadley. The "hamburger" menu item does not appear @yihui @chipbrock @luispuerto

[luispuerto]

I can confirm!

[louisaslett]

Also confirmed on iPhone 12 with iOS 14.4.2 -- portrait is fine, but landscape the menu bar disappears. If you tap roughly where the three line collapse icon should be, it does indeed expand/collapse the contents but is not visible.

[apreshill]

FWIW - I am not able to reproduce by simulating with Firefox Responsive Design Mode:

Screen.Recording.2021-05-28.at.9.24.42.AM.mov

[cderv]

@apreshill this is indeed difficult to reproduce because it seems related to mobile browser and emulation on desktop browser does not show the issue. It is quite the same with all mobile issue. This is some iPhone, iPad stuff also. Not even sure the issue arise on another mobile device (I need to check this).

Anyway, this makes it hard to diagnose and to fix (also because I don't web mobile specific stuff 🤷‍♂️ )

[jtbayly]

No, the issue is open.

[cderv]

Hi @dullhunk

This issue is not closed and is still open. No need to open a new one.

As a workaround, Possible that the new bs4_book() behave better on apple device.

If anyone can help with web CSS for mobile on iPad, this would be much appreciated, feel free open a PR !

[dullhunk]

Thanks @cderv yes bookdown::bs4_book behaves much better on Apple devices, has lots of nice features and doesn't have this hamburger bug.

Unfortunately bookdown::bs4_book doesn't have all the features of bookdown::gitbook though ...

I'm not enough of an expert on gitbook or CSS to submit a pull request on this one.

[jtbayly]

Wow. Thank you. I can't wait to try this. Is this fully fixing the problem in your experience? Will a simple pull request fix this whole issue?

[github-actions]

This old thread has been automatically locked. If you think you have found something related to this, please open a new issue by following the issue guide (https://yihui.org/issue/), and link to this old issue if necessary.