Issues on iOS mobile

[looselytyped]

I found this from your comment on HN — Great work. I am looking forward to using this.

Based on a Reply to your aforementioned comment, I tried https://loconotion-example.netlify.app/ on an iPhone, and I can't seem to scroll left-right. This happens in both landscape and portrait mode.

Details of my phone

iPhone 8 Plus with a 5.5-inch display

Please let me know if I can provide any details.

Again, great work! Thanks.

[leoncvlt]

Thanks for opening the issue - I can see this too. Ideally horizontal scroll should be available only on long, non-wrappable items (like tables), and all text content should fit the page width. Will take a look 😃

[leoncvlt]

Should be fixed as of c1329e0 - the example page at https://loconotion-example.netlify.app/ has been updated as well 🙂

[looselytyped]

Thanks for this!

I played around this for a bit, and the horizontal scroll problem seems to have been fixed!

I did notice a couple more things, and I will let you decide if you if want to see a separate issue for this or not.

• https://loconotion-example.netlify.app/portal.html seems to render the attributes of the page funny on iOS (both in portrait or landscape)
• I can't seem to click on any of the links on iOS on this page — https://loconotion-example.netlify.app/books-table.html

Again, thank you for this! Let me know if you need separate issues for these (then please let me know and close this issue) or you could just use this one.

[leoncvlt]

Cheers - can just update this one - seems like these issues don't occur when using the device simulator in Google Chrome, and are fine on Firefox on my Pixel as wel - will procure an actual iOS device to test on and let you know 🙂

[leoncvlt]

Hello, just FYI I tried this on a iPad mini not so long ago and it seems to still be an issue - will require further investigation - any help with this is welcome 😃

[vzakharov]

I don’t know if it’s the right place to post this but this page is mangled in Chrome iOS

[tiulpin]

@vzakharov, seems like a bug on WebKit (Chrome on iOS is almost Safari because of iOS limitations). Have the same issue on desktop Safari, don't know the way to fix it.

@leoncvlt are you aware of this?

[leoncvlt]

Yup, I'm aware, haven't done any in-depth investigation since I do enough obscure-bugs-on-ios-only-troubleshooting during my regular job 🙈 Hopefully the new year will bring some discipline to actually look into this...

[tiulpin]

@leoncvlt, the problem with the empty spaces inside the blocks happens because Safari does not calculate height as Chrome does.

If you manually edit the generated HTML, the problem will be solved:

• to $('#notion-app > div > div > div > div.notion-scroller.vertical.horizontal > div:nth-child(2)') set max-height: 50px;
• to $('#notion-app > div > div > div > div.notion-scroller.vertical.horizontal > div:nth-child(2) > div > div > div > div > div:nth-child(2)') remove height

Not the best solution and I don't know how to insert such logic inside the code with ChromeDriver. Still, the issue is important for me, because I don't want to miss iOS users on my Notion-generated websites.

[mabdullahabid]

@leoncvlt, the problem with the empty spaces inside the blocks happens because Safari does not calculate height as Chrome does.

If you manually edit the generated HTML, the problem will be solved:

• to $('#notion-app > div > div > div > div.notion-scroller.vertical.horizontal > div:nth-child(2)') set max-height: 50px;
• to $('#notion-app > div > div > div > div.notion-scroller.vertical.horizontal > div:nth-child(2) > div > div > div > div > div:nth-child(2)') remove height

Not the best solution and I don't know how to insert such logic inside the code with ChromeDriver. Still, the issue is important for me, because I don't want to miss iOS users on my Notion-generated websites.

Where and how did you insert this code to make it work? The hashed css file?

[mabdullahabid]

@leoncvlt I'd like to help with this. Did you come up with anything on this? I'm guessing we'll need to inject some code at the scraper level?

[leoncvlt]

Hi all, check out f9a1dc4, should have fixed this - I've also update the test site at https://loconotion-example.netlify.app/

[leoncvlt]

Will close now, feel free to make some noise if you get any more issues about this.