search

leoncvlt / loconotion

📄 Python tool to turn Notion.so pages into lightweight, customizable static websites
838 stars 132 forks source link

Issues on iOS mobile #1

Closed looselytyped closed 3 years ago

looselytyped commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

looselytyped commented 4 years ago

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.

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 commented 4 years ago

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 commented 4 years ago

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 commented 3 years ago

I don’t know if it’s the right place to post this but this page is mangled in Chrome iOS 8B61115B-5C42-4879-A3E6-72A380DDB0F9

tiulpin commented 3 years ago

@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. telegram-cloud-photo-size-2-5442923930538063178-y

@leoncvlt are you aware of this?

leoncvlt commented 3 years ago

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 commented 3 years ago

@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:

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 commented 3 years ago

@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 commented 3 years ago

@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 commented 3 years ago

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

leoncvlt commented 3 years ago

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