Jump to content
TNG Community
slowjim

Multipage PDF files do not render correctly in iPadOS

Recommended Posts

slowjim

Often I find it useful to create and add medialinks to multipage .pdf files to display in an individual's document section. On all my PC browsers these files render correctly and let me move between pages with no problems. I noticed when I access my site on any browser on my iPad and try to view a .pdf it only shows the first page and will not let me see the additional pages in the file. In trying to solve the problem I read many suggestions that the reason was because none of the browsers on my iPad were able to add an extension for pdf's. However, I put that to a test. I uploaded the exact same .pdf file to Ancestry.com into an individual's 'Gallery Page'. With my iPad and using Safari I viewed the exact same .pdf file on Ancestry.com's website and it rendered correctly and let me move between pages. Same results with Edge and Chrome on my iPad. Worked great. However, the exact same .pdf file will NOT render correctly from my TNG site viewed from my iPad. The file works great viewed from my PC. 

For an example, you can go to my website. Without a login you can click 'All Media'. On the resulting page, in the searchbox type 'Wunsche'. Click the resulting medialink ("Wunsche Bros. Cafe celebrates 100-year history in Old Town Spring". If you are on a PC the file will show both pages perfectly. If you are on an iPad it will only show the top page.

The point is that I do not understand how it could be a problem with browsers running on iPadOS not allowing extensions when it renders correctly from Ancestry, but NOT from my TNG site. I am sure I'm not doing something correctly. I would like all aspects of my website to work correctly on most popular devices. Would really appreciate any help.

https://thebrownfamilytree.info

Share this post


Link to post
Share on other sites
theKiwi

When you view it on Ancestry does it open into a window that is only the PDF document? (Compared to TNG which shows it "wrapped" in the TNG header and footer and all the page navigation stuff).

Roger

Share this post


Link to post
Share on other sites
Philip Roy

I just tried on my Mac, running Big Sur 11.4 and Safari....and I get a big grey box where the PDF should be, but not the PDF displaying. I then tested my own site (sorry, it's a private one) and my PDFs are displaying fine...so I think you need to adjust the setting about how PDFs are displayed on a page.

I think...although I'm struggling to remember which setting it is, that you need to make sure that Setup --> General Settings --> Media --> Enable Image viewer...is set to "Always"

Phil

Share this post


Link to post
Share on other sites
Philip Roy

And now I’m experiencing the same issue on my 1 week old iPad Pro for my own site…so challenge accepted…I’m going to start looking for answers. As the only mods I use on my site are my own code, I’ll try and see what happens if I turn those off. I’m also off to Google a bit.

Phil

Share this post


Link to post
Share on other sites
XerxX

Slowjim and Phil, I run Mac w/ Big Sur 11.3 + Firefox.

The PDF Slowjim linked to looks fine to me in lowest and highest (4K) screen resolution:

showpdf.jpg

/Erik

Edit: Didn't notice that Phil wasn't the OP.

Edited by XerxX

Share this post


Link to post
Share on other sites
Philip Roy

I shouldn't have rushed to reply to slowjim after getting in from work as I have to correct the Mac comment...but it also does point to a Safari issue.

I said that the PDF didn't display in Safari on a Mac. In fact the second time I tried, it did...but take a look at the image. Visually, there's no clear way to know that you can scroll. I just happened to use the scroll wheel on my mouse and the PDF scrolled. You wouldn't know this is a multi-page PDF.

Screen Shot 2021-05-25 at 9.41.47 PM.png

So then I went back to the iPad....and as slowjim says, this is what you get....

IMG_2362.PNG

Again, there is no sign whatsoever that this is a muti-page PDF. I'm not impressed...and it seems to be a safari thing.

So I googled as to how you scroll through a PDF like this and the only thing I could find was that you open the PDF in a separate tab....which didn't work for me...

https://discussions.apple.com/thread/3802157

I've never looked at PDFs on an iPad (I always use my Mac and always download the PDF) so I have never noticed this. I'm not sure there is a fix? It seems to be a Safari issue and maybe not something that can be fixed by TNG coding?

Other browsers don't seem to have that issue. I always have Firefox installed, but I'm a Safari fan and use them on all my devices...and I don't want to be starting to tell people what browser to use...I hate that. That said, as far as I can see, I'm not sure there is a fix for this?

Phil

 

 

Share this post


Link to post
Share on other sites
Philip Roy

Oh and keep in mind, all the browsers on iPad OS use the same rendering engine I believe...so that would be why the results on iPad are all consistently bad?

Phil

Share this post


Link to post
Share on other sites
KoScho

I also can confirm this issue with an iPad Air iOS 12.5.3 and an iPad Pro iOS 14.4.2, regardless the browser (Safari, Firefox, Chrome, Edge).

Konrad

Share this post


Link to post
Share on other sites
XerxX

In my MacBook Air, running OS10.11.6 (El Capitan) + Firefox, there is no scrollbar when the page is displayed.

As soon as I put two fingers on the  touchpad I get a scrollbar and I can scroll down, using two fingers, to see both pages just fine.

Likewise, when I press the down-arrow key, the page scrolls and there is a scrollbar. Which immediately disappears until I press the key again.

1 hour ago, Philip Roy said:

just happened to use the scroll wheel on my mouse

"scroll wheel" on a Mac mouse? Did you use the "Magic Mouse" and scrolled with two fingers? Or?

Maybe it (Magic Mouse) works like the touchpad (no scrollbar until you place two fingers on it)? I don't use the MM so I don't know.

/Erik

Share this post


Link to post
Share on other sites
slowjim

Roger, when the PDF is viewed on Ancestry through the iPad, it is wrapped with controls to move between pages and to download and the page is themed with Ancestry’s look. Very similar to the way it displays on TNG when viewed with a PC. I suspect there could possibly be something with the way my iPad is configured OR worse some problem with the way the PDF viewer in TNG works and if there is some adjustment I can make. Hopefully, if someone else can tell me their experience with it, I might can rule out it being a problem with my specific iPad or all of them.

Share this post


Link to post
Share on other sites
slowjim

Hi Phil

The image viewer was set to ‘Always’. To experiment a bit, I changed it to ‘Documents only’ and it seemed to have no effect. I cleared the cache, brought it all up again and the results were no joy.
 

Jim

Share this post


Link to post
Share on other sites
slowjim

Hi Eric,

Thanks for looking at it. I was wondering if there were any compatibility problems with Macs and apparently there is not. I realize it is likely impossible to make something work the same on every possible device. I gave up a long time ago worrying about the 2 guys left out there still running Internet Explorer. However, iPads are pretty ubiquitous.

Jim 

Share this post


Link to post
Share on other sites
KoScho

Hi,

it seems that the problem has been discussed at https://stackoverflow.com/questions/15854537/make-embedded-pdf-scrollable-in-ipad (Make embedded PDF scrollable in iPad“). One statement is that - as Philip stated before - all browsers use the same rendering engine. I do not know how big the effort would be, but perhaps it is possible to use the mentioned JavaScript library (PDF.js) for this purpose?

Konrad

Share this post


Link to post
Share on other sites
slowjim

Thank you Conrad,

I appreciate your input here. It gave me another idea. Using Safari on my iPad, I went to a site that shows an online demo of PDF.js. The demo is at
https://mozilla.github.io/pdf.js/web/viewer.html
It shows a 14 page pdf document in a frame. I works perfectly on my iPad. I am slowly coming to a conclusion based on the pdf frame I viewed from the Ancestry.com site and the demo site I show here that likely there is no problem with my iPad OR my PDF files. It seems likely this is a bug in the viewer used by the TNG web application itself. If I am wrong, I apologize because I recognize the hard work that went into building this outstanding package. I just cannot see any other reason.  Maybe someone can tell me the best way to pass this up the chain.

Thanks Jim 

Share this post


Link to post
Share on other sites
KoScho

Hi Jim,

I‘ve been going on looking for a solution or - at least - trying to understand the problem. I‘m no real expert for HTML / PHP / JavaScript, but I do know the basics. So now it seems that the problem is caused by all browsers on mobile devices made by Apple, and not by your specific iPad, your specific pdf file and not by TNG.

The problem seems to be that Safari and other browsers on the iPad use the same rendering engine (Philip stated that before), and this rendering engine can‘t display the pdf file in the right way, especially because of the the <embed ... > statement.Take a look at https://developer.apple.com/forums/thread/649982 - that‘s exact the situation.

Obviously in the past programmers have already tried to find solutions, the mentioned „PDF.js“ is one of them. I found another free project called „PdfObject“ ( https://pdfobject.com/ and https://github.com/pipwerks/PDFObject#readme ).

And I looked into the TNG file „showmedialib.php“, the line 585 (version 13.0.3) says:

echo „embed src= ...

I think this line must be modified or replaced by something that first checks wether the browser supports the <embed ...> statement in the right way or not (this comes from the „PdfObject“ project. If not (iPad) it should be possible to show the pdf at least with the possibility to scroll, but problably the pdf would only be shown, but nothing else.

Well, that‘s what I‘ve found out so far, if anyone knows more concerning this problem, please tell me! In the meantime I will continue to get a deeper understanding of this.

Konrad

Share this post


Link to post
Share on other sites
slowjim

Ok, I put my site in maintenance mode while I work on a solution. Unfortunately, I have other commitments and won't be able to get back to it until later this evening. I am pretty sure something good may happen regarding a solution (hopefully). If not I'll just put it back like it was.
 

https://thebrownfamilytree.info/

Share this post


Link to post
Share on other sites
Philip Roy

Just catching up on this thread. I'm not going to be able to look at this until the weekend on my site, but I'll play around with some of the code that is linked to by people (thanks) and if we find a solution, maybe we can ask Darrin to add it in, as I think the solution should be universally applied, not a mod.

Oh and my scrolling mouse wheel on my Mac? It's a M$ mouse and it's corded. Don't like wireless and there's nothing magic about the Apple mouse.

Share this post


Link to post
Share on other sites
slowjim


Posted on the Wiki is the "PDFjs Viewer Mod v13.0.0.0" by Author(s) Martin Pannier and Brent Hemphill. It appears to absolutely solve all the problems with viewing PDF's, multipage or not, on PC's, iPads, and Android devices that I mentioned in these posts. 

Problem solved.

Share this post


Link to post
Share on other sites
bhemph

I have posted the PDFjs Viewer Mod which uses a PDFjs version which is compatible back to Android 5.1.1.  The mod originated from something that another TNG user had originally posted several years ago before leaving the TNG community.  Jim tested the mod out with a few different settings than what I had tested out and I think we have enough accounted for that there should not be problems for users to run into.  Konrad was also looking at this solution.  I know there are less than 10% of tablets still running a version of Android that old, but admins probably do not want to have to keep track of mobile OS compatibility issues so I tried to use a version that would cover most of what is still in use.

Brent

Share this post


Link to post
Share on other sites
Philip Roy

That's great if it solves the issue! Sorry, have been a bit busy and was going to look at this in the weekend.

Asking a silly question possibly, but does installing the mod have any impact on other users who aren't using these devices? I mean, does it change the experience on the desktop for PC and Mac users etc etc?

If the answer to that is no, then this needs to be part of TNG. It shouldn't require a mod for PDFs to display properly. Not a criticism of Darrin...just that I'm keen to see this become part of the core, as opposed to something people have to add. One reason for that....how would you know you need it installed, until someone raises it as an issue on your site?

Phil

Share this post


Link to post
Share on other sites
slowjim

Hi Phil,

The mod does not seem to have any negative impact on anyone viewing that is NOT using any of the aforementioned devices. You can check this out for yourself if you wish. Go to my site;
https://thebrownfamilytree.info/
Select All Media
In the searchbox enter 'boxrec' 
Click the pdf icon
You can view a three page pdf there in the frame. 

Thanks
JIm
 

Edited by slowjim

Share this post


Link to post
Share on other sites
Philip Roy

Awesome! So I've tested it on a PC using Chrome and Edge, my iPhone and iPad, iMac - using Safari and Firefox....so it does indeed seem to be the solution to the PDF issue and not have any issues on the desktop.

I'm going to flick Darrin an email just to draw his attention to the thread. Thanks to those clever people that know how to solve these things!

Phil

Share this post


Link to post
Share on other sites
Philip Roy

@bhemph I contacted Darrin, as I think this should be core code...not a mod. I'm sure there are many who don't even realise that the PDFs aren't displaying for every device like they might think.

His reply was "Does the mod's author want me to incorporate his code? Have him contact me if he does."

Could you? I'm a bit confused about the source of the js script. Think it's open source or free....but I've managed to put myself in the middle of a discussion I don't know enough about.

Thanks in advance.

Share this post


Link to post
Share on other sites
slowjim

[License

PDF.js is licensed under the “Apache License, Version 2.0” that makes it possible to use it in your own application.  Be aware that the PDF.js viewer also includes files of the Adobe CMap project. These files are available under the terms of a different license.]

To me, the above statement that I read at a site is as clear as mud. 

Here's another article on that subject that sounds a bit more positive and instructional.
https://github.com/mozilla/pdf.js/#:~:text=Contributing-,PDF.,always looking for more contributors

It says:  PDF.js is an open source project and always looking for more contributors. 

It also says: PDF.js is hosted on several free CDNs: I'm pretty sure all this says it's there for anyone to use.

Share this post


Link to post
Share on other sites
Philip Roy

Thanks. That said, I'm not sure why Darrin wants @bhemph to contact him (I'm not sure of the process for getting mods into the core code) so it sounds like that discussion still needs to happen.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×